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

有时候表格太多列，要是默认全都显示就会很拥挤，又不能固定只显示某些列，这时候我们可以让用户自定义要显示隐藏哪些列。
网上很多教程都是用的v-if，但是v-if非常麻烦，每一列都要写判断条件，本篇文章将用动态渲染的方式来控制表格列的显示隐藏

功能点

• 表格数据以及列动态渲染（关键点）
• 弹窗可以使用checkbox多选框自定义某些列显示/隐藏
• 刷新以及下次打开，保持上次显示和勾选

效果图

实现的完整代码

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

<template>
  <div class="app-container">
    <el-button
      style="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-checkbox
          v-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-column
        label="序号"
        align="center"
        type="index"
        fixed
        sortable
      />
      <!-- 动态渲染 -->
      <el-table-column
        align="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>