vue+element 通过checkbox控制el-table-column的显示或隐藏

vue页面：

<TableCom
  :tableConfig="tableConfig"
  :cellStyle="cellStyle"
  :pageConfig="pageConfig"
  @refresh="generateData"
  ref="table"
>
  <template v-slot:btn>
    <el-popover class="popover" placement="bottom" title="列筛选" trigger="click">
      <el-checkbox-group v-model="checkList" @change="filter">
        <el-checkbox
          v-for="(item, index) in tableConfig.tableHeader"
          :label="item.prop"
          :key="index"
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <el-button size="medium" slot="reference"
        ><i class="el-icon-arrow-down el-icon-menu"></i
      ></el-button>
    </el-popover>
  </template>
  <template v-slot:screen>
    <Screen v-if="isScreen" :systemData="systemData" />
  </template>
</TableCom>

ts：

private tableConfig: any = {
  tableHeader: [
    { prop: 'code', label: '空调编号', minWidth: 100, visible: false },
    { prop: 'sjsj', label: '数据时间', minWidth: 160, visible: true },
    { prop: 'kgjzt', label: '开关机', minWidth: 70, visible: true },
  ],
  tableData: [],
  loading: true
};
private checkList: string[] = []; // 筛选列选中的数据列表

created() {
  this.init();
}

// 初始化函数
init() {
  for (let item of this.tableConfig.tableHeader) {
    if (item.visible) {
      this.checkList.push(item.prop);
    }
  }
}

// 控制隐藏显示的函数
filter(val: any) {
  for (let header of this.tableConfig.tableHeader) {
    header.visible = val.includes(header.prop);
  }
}

参考链接：https://blog.csdn.net/qq_36802726/article/details/91875898