Frontend HTML
//列表
<el-table>
<el-table-column prop="order" label="序号" header-align="center"
v-if="uncheckList.order" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" header-align="center"
v-if="uncheckList.name" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" header-align="center"
v-if="uncheckList.age" align="center"></el-table-column>
</el-table>
//筛选按钮
<el-popover
placement="right"
title="列筛选"
trigger="click">
<el-checkbox-group v-model="checkList" @change="filter">
<el-checkbox v-for="(item,index) in tableList" :label="item.label">{
{item.value}}</el-checkbox>
</el-checkbox-group>
<el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
</el-popover>
JS
//筛选按钮的数据列表,与table表头的数据一致
tableList: [
{
label: 'order',
value: '序号'
},{
label: 'name',
value: '名字'
},{
label: 'age',
value: '年龄'
}]
checkList: [],//筛选列选中的数据列表
uncheckList: {},//控制筛选列显示隐藏
//页面加载自动运行函数
mounted: function () {
this.filter()
},
//控制隐藏显示的函数
filter(val) {
//初始化数据
if (val == undefined) {
for (index in vm.tableList) {
let table = vm.tableList[index];
vm.checkList.push(table.label);
vm.uncheckList[table.label] = true;
}
}
//数据准备
for (item in vm.uncheckList) {
vm.uncheckList[item] = false;
}
//数据处理
for (index in vm.checkList) {
let name = vm.checkList[index];
if (name in vm.uncheckList) {
vm.uncheckList[name] = true;
}
}
this.$forceUpdate();
}
通过v-if=""控制<el-table-column>的显示隐藏
所以v-if=""里面的数据值要和tableList里面的数据一一对应
final result:
Cancel the reporting unit box and change the column and it will disappear