【Vue】如何写一个表格列显隐控制的组件？

需求

公司项目需要实现对表格列的显示隐藏进行配置，额外配置可自行添加，感觉这个组件挺泛用的，随便记录下。

这里只是说简单的显隐控制，复杂的只是在页面里面多写而已，核心代码是一样的。

简单的：

比较复杂的：

代码实现

表格页面.vue

      selectedColumns: [
        {
          displayName: 'Name',
          show: true,
        },
        {
          displayName: 'Email Address',
          show: true,
        },
        {
          displayName: 'Profile Type',
          show: true,
        },
        {
          displayName: 'User Type',
          show: true,
        },
      ],

    columnSetup(selectedColumns) {
      this.selectedColumns = selectedColumns
    },
    isShowClumn(name) {
      let isShow
      this.selectedColumns.forEach((item) => {
        if (item.displayName === name) {
          isShow = item.show
        }
      })
      return isShow
    },

组件.vue

样式请自行删减，有些是无用代码。