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