element 多button按钮默认选中点击切换
<div class="header"> <el-button type="primary" :plain='this.A' @click="()=>{this.tableData=this.tableData1;this.A=false;this.B=this.C=this.D=true}" >政治监督</el-button> <el-button type="primary" :plain='this.B' @click="()=>{this.tableData=this.tableData2;;this.B=false;this.A=this.C=this.D=true}">开始阶段</el-button> <el-button type="primary" :plain='this.C' @click="()=>{this.tableData=this.tableData3;this.C=false;this.A=this.B=this.D=true}">落实阶段</el-button> <el-button type="primary" :plain='this.D' @click="()=>{this.tableData=this.tableData4;this.D=false;this.A=this.B=this.C=true}">完成阶段</el-button> </div>
plain属性控制显示隐藏,也能解决切换页面不选中 ,点击立即执行事件控制逻辑
this.tableData=this.tableData1控制子组件props数据传输
this.A=false;this.B=this.C=this.D=true控制点击显示隐藏
data() { return { A:false, B:true, C:true, D:true, } }
写的很low,但方便简单