vue动态表头,字段管理

<el-popover ref="checkPop" placement="bottom" width="200" trigger="click">
      <el-checkbox-group v-model="colCheckList">
            <el-checkbox
              :label="item.value"
              v-for="item in colList"
              :disabled="item.disabled"
              :key="item.value"
              class="checkbox"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
          <el-button content="查询字段筛选" effect="" slot="reference" icon="el-icon-        
    setting" size="mini">字段管理</el-button>
</el-popover>

<el-table v-loading="loading" :data="unitInfoList"  border @selection-change="handleSelectionChange">
      <el-table-column
        v-for="(tableItem,tableIdx) in colList" :key="tableIdx"
        :label="tableItem.name"
        header-align="center"
        :align="tableItem.alignType"
        :prop="tableItem.value"
        v-if="checkStatus(tableItem.value)"
      >
      </el-table-column>
    </el-table>

colList: [
        { name: '用水单元', value: 'name', disabled: true, alignType: 'left' },
        { name: '入驻单位', value: 'residentUnit', disabled: true, alignType: 'left' },
        { name: '楼层', value: 'floor', disabled: true, alignType: 'right' },
        { name: '建筑面积(㎡)', value: 'area', disabled: false, alignType: 'right' },
        { name: '水的用途', value: 'useto', disabled: false, alignType: 'left' },
        { name: '运营情况', value: 'operate', disabled: false, alignType: 'left' },
        { name: '测试期间人数', value: 'testNum', disabled: false, alignType: 'right' },
        { name: '备注', value: 'remark', disabled: false, alignType: 'left' }
    ],

// 选中表格列
      colCheckList: [
        'name',
        'residentUnit',
        'floor',
        'area',
        'useto',
        'operate',
        'testNum',
        'remark',
      ],

checkStatus(el) {

      return this.colCheckList.includes(el)

    },