因为功能需要,element框架目前没有开放此功能,所以对比element发布的最新版本,做了点尝试,结果还不错
先看html代码
<el-popover
placement="bottom"
width="200"
trigger="click">
<div style="padding:4px;" v-for="item in colSelect" :key="item" :label="item" :value="item">
<el-checkbox v-model="colOptions" :label="item" border></el-checkbox>
</div>
说明:colSelect用来存放需要筛选显示的列的字段 数组形式
colOptions: 需要再Watch里面监听变化的值 数组形式
<el-button slot="reference">筛选列</el-button>
<el-table-column v-for="item in tableHead":label="item.label" v-if="item.istrue" :property="item.property"
width="180">
<template slot-scope="scope" >
{{scope.row[scope.column.property]}}
</template>
</el-table-column>
说明: tableHead:[] 数组,存放展示的表头
js部分 字段已经上面说明,就不解释了
creatd(){
var _this = this;
for (let i = 0; i < _this.tableHead.length; i++) {
_this.colSelect.push(_this.tableHead[i].label);
if (_this.tableHead[i].label == '名称') { //初始化不想展示的列可以放在这个条件里
continue;
}
_this.colOptions.push(_this.tableHead[i].label);
}
}
watch: {
colOptions(valArr) {
var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
this.tableHead.filter(i => {
if (arr.indexOf(i.label) != -1) {
i.istrue = false;
this.$nextTick(() => {
this.$refs.tableDataRef.doLayout();
});
} else {
i.istrue = true;
this.$nextTick(() => {
this.$refs.tableDataRef.doLayout();
});
}
});
}
}
说明:doLayout() 是重新动态计算表格的宽度
实现效果