element 设置动态表头显示

js文件

/*
 * 动态表头配置
 * @Ace
* */

//动态表头
export const colSelect = [
  {
    'label':'案件名称',
    'prop':'caseName',
    'minWidth':150,
    'align':'center'
  },{
    'label':'办案部门',
    'prop':'name',
    'align':'center',
    'minWidth':120,
  },{
    'label':'办案区',
    'prop':'roomName',
    'align':'center',
    'minWidth':120,
  },{
    'label':'实际入区时间',
    'prop':'createTime',
    'align':'center',
    'width':150,
  },{
    'label':'实际出区时间',
    'prop':'leaveTime',
    'align':'center',
    'width':150,
  }
];

//默认表头
export const colOptions = ['caseName','name','roomName','createTime','leaveTime'];

vue文件

  import {colOptions,colSelect} from  './tableConfig.js';
  colOptions,//表头默认配置
  colSelect,//动态表头数据

watch:{
  colOptions(valArr) {
    this.key = this.key + 1;
  }
},
computed:{
  formTheadOptions(){//计算属性  动态显示
    let valArr = this.colOptions;
    return this.colSelect.filter(i => valArr.indexOf(i.prop) >= 0);
  }
},

<el-table
   :data="tableData"
   v-loading="listLoading"
   element-loading-spinner="iconfont icon-loading zy-icon-loading"
   size="small"
   :height="tableH"
   stripe
   :key="key"
   ref="table"
 >
 </el-table>

<el-table-column
   v-for="(item,index) in formTheadOptions"
   :key="index"
   :prop="item.prop"
   :label="item.label"
   :width="item.width || ''"
   :min-width="item.minWidth || ''"
   :align="item.align || 'left'"
 >
 </el-table-column>

<!--表头设置-->
      <el-popover
        width="200"
        placement="left"
        trigger="click"
      >
        <i slot="reference" class="fixedSetting el-icon-setting" style="cursor:pointer;margin-left:5px;"></i>
        <el-select v-model="colOptions" multiple collapse-tags placeholder="请选择">
          <el-option v-for="(item,index) in colSelect" :key="index" :label="item.label" :value="item.prop">
          </el-option>
        </el-select>
      </el-popover>
      <!--表头设置-->