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

末蓝、 2023-07-10 12:52 5阅读 0赞

> 因为功能需要，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() 是重新动态计算表格的宽度

实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODY0MzIw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODY0MzIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302173810797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODY0MzIw,size_16,color_FFFFFF,t_70