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);
  }
}

 

 


上一篇:Bootstrap 中visible-xs、hidden-xs等的用法


下一篇:EntiyFranmework数据持久化的增删查改