Element实现击表头控制表格列显隐

在这里插入图片描述
点击+号展开表格
在这里插入图片描述web

实现步骤:
1. 表格里加入加号减号图标svg

<el-table-column
            prop="q1sum"
            label="Q1"                                                       
            >
            <template slot="header">
                    <div>
                        <span>Q1</span>
                        <i :class="this.saleShowQ1?'el-icon-minus':'el-icon-plus'" style="color:#409eff;margin-left:15px;"></i>
                    </div>
                </template>
        </el-table-column>
        <el-table-column
            v-if="saleShowQ1"
            prop="m1"
            label="1月"
            >
        </el-table-column>
        <el-table-column
            v-if="saleShowQ1"
            prop="m2"
            label="2月"
           >
        </el-table-column>
        <el-table-column
            v-if="saleShowQ1"
            prop="m3"
            label="3月"
           >
        </el-table-column>

2. 设置变量控制+,- 图标的显隐
//表格月份模块显隐控制
saleShowQ1 = false;
3. 表头加入点击事件
在这里插入图片描述
4. 方法里实现表头点击事件this

//识别表头property,控制显隐
ifshow(column, event){
var title= column.property;
//销售模块显隐控制
if(title === ‘q1sum’){
this.saleShowQ1 = !this.saleShowQ1;
}
}spa