Vue+Element 动态控制列隐藏和显示

项目背景：vue项目

业务需求：列数据动态控制显示与隐藏

插件/依赖：element

---

<!--
 * @Description: 动态控制列隐藏与显示
 * @Author: Walis
 * @Date: 2022-11-03 11:56:24
 * @LastEditors: Walis
 * @LastEditTime: 2022-11-03 13:05:40
-->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- 多选切换 -->
        <el-checkbox-group v-model="checkList"
                           @change="handleChange">
          <el-checkbox label="姓名"
                       disabled></el-checkbox>
          <el-checkbox label="地址"></el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
    <!-- 动态渲染表格数据和表头 -->
    <el-table :data="tableData"
              ref="table"
              style="width: 100%">
      <template v-for="(item ,index) in col">
        <el-table-column v-if="item.show"
                         :key="`col_${index}`"
                         :prop="item.prop"
                         :label="item.label">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

  <script>
export default {
  data () {
    return {
      tableData: [], // 表格数据
      checkList: ['姓名', '地址'], // 多选默认值
      group: ['address'], // 控制显示的列
      col: [ // 列options 这里这样写模拟动态表头效果 和本文章目标无关系
        { 'prop': 'name', 'label': '姓名', 'show': true },
        { 'prop': 'address', 'label': '地址', 'show': true }
      ],

    }
  },
  mounted () {
    this.loadData() // 加载表格数据
  },

  beforeUpdate () {
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 防止切换多选时表格抖动 可自行注释该行后观察此问题
    })
  },
  methods: {
    /**
     * @name: handleChange
     * @description: 单选改变事件 这里仅作单选效果 若要多选检查group与checkList包含关系即可
     * @param {Array} val 所选值数组
     */
    handleChange (val) {
      if (val) {
        this.$nextTick(() => {
          this.col.forEach(i => {
            this.group.forEach(j => {
              if (i.prop == j)
                i.show = !i.show
            })
          })
        })
      }
    },
    /**
     * @name: loadData
     * @description: 获取表格数据
     */
    loadData () {
      // 调用接口 获取数据
      this.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 弄'
      }]

    }
  }
}
  </script>