一.
筛选弹出框:
<el-col :span="1.5">
<el-popover placement="bottom" title="筛选列" trigger="click" width="40">
<el-checkbox-group v-model="checkedColumns" size="mini">
<el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
</el-checkbox-group>
<el-button icon="el-icon-plus" size="mini" slot="reference">筛选列</el-button>
</el-popover>
</el-col>
二.
给每一列添加 v-if
<el-table-column v-if="colData[0].istrue" prop="serverCode" label="编号" width="80px"></el-table-column>
注意:要给el-table添加:key="reload"属性,这是为了主动重新渲染列表,避免组件自动使用缓存而不刷新。
三.
data() {
return {
// colData中列出表格中的每一列,默认都展示
colData: [
{ title: "编号", istrue: true },
{ title: "内网IP", istrue: true },
{ title: "设备状态", istrue: true },
{ title: "持续时间", istrue: true },
{ title: "更新时间", istrue: true },
{ title: "服务状态", istrue: true },
{ title: "工作状态", istrue: true },
{ title: "是否请允许关机", istrue: true },
{ title: "服务器类型", istrue: true },
],
,
// 多选框的列表,列出表格的每一列
checkBoxGroup: ["编号", "内网IP", "设备状态", "持续时间", "更新时间", "服务状态", "工作状态", "是否请允许关机", "服务器类型"],
// 当前选中的多选框,代表当前展示的列
checkedColumns: ["编号", "内网IP", "设备状态", "持续时间", "更新时间", "服务状态", "工作状态", "是否请允许关机", "服务器类型"]
}
}
四.
监听筛选列事件
watch: {
checkedColumns(val) {
let arr = this.checkBoxGroup.filter(i => !val.includes(i));
this.colData.filter(i => {
if (arr.indexOf(i.title) != -1) {
i.istrue = false;
} else {
i.istrue = true;
}
});
//解决表格闪烁问题(不一定出现)
this.reload = Math.random()
}
}
版权声明:《 el-table动态显示隐藏列 》为Wayne原创文章,转载请注明出处!
最后编辑:2022-5-25 01:05:55