el-table实现自定义列显示隐藏

有时候表格太多列，要是默认全都显示就会很拥挤，又不能固定只显示某些列，这时候我们可以让用户自定义要显示隐藏哪些列。

网上很多教程都是用的v-if，但是v-if非常麻烦，每一列都要写判断条件，本篇文章将用动态渲染的方式来控制表格列的显示隐藏

功能点

效果图

实现的完整代码

核心：监听checkbox，checkbox改变时，重新渲染表格列，同步保存到本地缓存。

完整代码：

<template><div class="app-container"><el-buttonstyle="margin-bottom: 10px"size="small"type="primary"icon="el-icon-s-operation"@click="tableSelectVisible = true">自定义列</el-button><!-- 弹出框 --><el-dialog title="表格列配置" :visible.sync="tableSelectVisible"><el-checkbox-group v-model="checkboxVal"><el-checkboxv-for="item in formTheadOptions":label="item.prop":key="item.prop">{{ item.label }}</el-checkbox></el-checkbox-group></el-dialog><!-- 表格数据 --><el-table :key="key" :data="dataList" border stripe id="table"><el-table-columnlabel="序号"align="center"type="index"fixedsortable/><!-- 动态渲染 --><el-table-columnalign="center"v-for="(item, index) in formHead":key="index":label="item.label":prop="item.prop"></el-table-column><el-table-column label="操作" align="center" width="120" fixed="right"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit">修改</el-button><el-button size="mini" type="text" icon="el-icon-delete">删除</el-button></template></el-table-column></el-table></div></template><script>// 默认const defaultFormThead = [{label: "第一列", prop: "col1" },{label: "第二列", prop: "col2" },{label: "第三列", prop: "col3" },{label: "第四列", prop: "col4" },{label: "第五列", prop: "col5" },];const defaultCheckedValue = ["col1", "col2", "col3", "col4"];export default {name: "Goods",data() {return {tableSelectVisible: false, // 对话框checkboxVal: [], // 复选框选中的值// 表格数据dataList: [{col1: "11",col2: "12",col3: "13",col4: "14",col5: "15",col6: "16",col7: "17",col8: "18",col9: "19",},{col1: "21",col2: "22",col3: "23",col4: "24",col5: "25",col6: "26",col7: "27",col8: "28",col9: "29",},{col1: "31",col2: "32",col3: "33",col4: "34",col5: "35",col6: "36",col7: "37",col8: "38",col9: "39",},],key: 1, // key保证table重新渲染// 所有列formTheadOptions: [{label: "第一列", prop: "col1" },{label: "第二列", prop: "col2" },{label: "第三列", prop: "col3" },{label: "第四列", prop: "col4" },{label: "第五列", prop: "col5" },{label: "第六列", prop: "col6" },{label: "第七列", prop: "col7" },{label: "第八列", prop: "col8" },{label: "第九列", prop: "col9" },],// 显示的列formHead: [],};},created() {// 读缓存let localHead = localStorage.getItem("tableHead");if (localHead) {this.formHead = JSON.parse(localHead);this.updateCheck();} else {// 没有设置过就用默认的this.formHead = defaultFormThead;this.checkboxVal = defaultCheckedValue;}},watch: {/* 监听checkbox变化，动态渲染表格列 */checkboxVal(valArr) {// console.log(valArr);// 用checkbox的值去所有列进行筛选this.formHead = this.formTheadOptions.filter((item) => valArr.indexOf(item.prop) >= 0);// console.log(this.formHead);this.key = this.key + 1; // 每次table不同key，保证重新渲染// 缓存到本地localStorage.setItem("tableHead", JSON.stringify(this.formHead));},},methods: {/* 初始化勾选 */updateCheck() {this.checkboxVal = [];// 筛选出勾选的值this.formHead.forEach((item) => {this.checkboxVal.push(item.prop);});},},};</script><style lang="scss" scoped></style>

vue结合elementui表格el-table实现弹窗checkbox自定义列显示隐藏 刷新保持上次勾选不丢失 附完整代码