点击+号展开表格
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