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,但方便简单

posted @ 2021-10-22 14:32  巨菜的小鸟  阅读(3467)  评论(0编辑  收藏  举报