vue+element-ui，前端控制显示隐藏列

因为功能需要，element框架目前没有开放此功能，所以对比element发布的最新版本，做了点尝试，结果还不错

先看html代码
<el-popover
  placement="bottom"
  width="200"
  trigger="click">
  <div style="padding:4px;" v-for="item in colSelect" :key="item" :label="item" :value="item">
    <el-checkbox v-model="colOptions" :label="item" border></el-checkbox>
  </div>
说明：colSelect用来存放需要筛选显示的列的字段  数组形式
colOptions： 需要再Watch里面监听变化的值  数组形式

  <el-button slot="reference">筛选列</el-button>
<el-table-column  v-for="item in tableHead":label="item.label" v-if="item.istrue" :property="item.property"
                width="180">
            <template slot-scope="scope"  >
                {
     {
     scope.row[scope.column.property]}}
            </template>
        </el-table-column>
        说明: tableHead:[] 数组，存放展示的表头

js部分   字段已经上面说明，就不解释了
creatd(){
     
 var _this = this;
  for (let i = 0; i < _this.tableHead.length; i++) {
     
     _this.colSelect.push(_this.tableHead[i].label);
    if (_this.tableHead[i].label == '名称') {
      //初始化不想展示的列可以放在这个条件里
      continue;
     }
     _this.colOptions.push(_this.tableHead[i].label); 
      
  }
}
  watch: {
     
  colOptions(valArr) {
     
    var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
    this.tableHead.filter(i => {
     
      if (arr.indexOf(i.label) != -1) {
     
        i.istrue = false;
        this.$nextTick(() => {
     
          this.$refs.tableDataRef.doLayout();
        });
      } else {
     
        i.istrue = true;
        this.$nextTick(() => {
     
          this.$refs.tableDataRef.doLayout();
        });
      }
    });
  }
}
说明：doLayout() 是重新动态计算表格的宽度

实现效果