Element ui Table组件动态控制列的显示隐藏

��最近遇到一个需求，要求可以动态控制 table 列表中的列的显示与隐藏，并且将选中的列进行存储，下次进入页面仍展示上次勾选的列。

经过查阅资料，实现了这个功能，创建一个Table.vue文件，组件封装代码如下：

                                                            {{scope.row[item.columnName]}}                                                                                                                                                                      export default {  props: {    tableData: {      type: Array,      required: true,      default: () => []    },    tableHead: {      type: Array,      required: true,      default: () => []    }  },  data() {    return {      columnSelecteds: [] // 已选择的项    }  },  watch: {    /* @title 监听列显示隐藏**/    columnSelecteds(newArrayVal) {      // 计算为被选中的列标题数组      var nonSelecteds = this.tableHead      .filter((item) => newArrayVal.indexOf(item.columnTitle) === -1)      .map((item) => item.columnTitle)      // 根据计算结果进行表格重绘      this.tableHead.filter((item) => {        const isNonSelected = nonSelecteds.indexOf(item.columnTitle) !== -1        if (isNonSelected) {          // 隐藏未选中的列          item.isShow = false          this.$nextTick(() => {            this.$refs.dataTable.doLayout()          })        } else {          // 显示已选中的列          item.isShow = true          this.$nextTick(() => {            this.$refs.dataTable.doLayout()          })        }      })      localStorage.setItem('columnSelecteds', JSON.stringify(newArrayVal))    }  },  created() {    // 初始化要显示的列    if (JSON.parse(localStorage.getItem('columnSelecteds')) && JSON.parse(localStorage.getItem('columnSelecteds')).length) {      this.columnSelecteds = JSON.parse(localStorage.getItem('columnSelecteds'))    } else {      this.tableHead.forEach((item) => {        if (item.isShow) {          this.columnSelecteds.push(item.columnTitle)        }      })      localStorage.setItem('columnSelecteds', JSON.stringify(this.columnSelecteds))    }  }}::v-deep .headerCell {  padding: 5px 0;  background: #f5f7fa;  color: #606266;}::v-deep .contentCell {  padding: 5px 0;  text-align: center;}::v-deep .el-table .cell{  white-space: nowrap;}.el-checkbox:last-of-type{  margin-right: 30px;}

 组件用法如下，新建一个index.vue，将Table组件引入使用：

import Table from './components/Table'export default { components: { Table, }, data() { return { // 表头数据 tableHead: [{ 'columnName': 'name', 'columnTitle': '姓名', 'isShow': true }, { 'columnName': 'date', 'columnTitle': '日期', 'isShow': false }, { 'columnName': 'address', 'columnTitle': '地址', 'isShow': true }], // 表格数据 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }}

效果如下图：

默认只展示姓名和地址列

缓存勾选的列 

 可以将日期列选中，在列表中进行展示

 缓存勾选的列