element ui 实现table表头自定义展示

最近在做系统的一些优化，有个需求就是针对展示列表，想自定义表头展示。
之前我们一直做的都是，默认展示重要的字段信息，然后再“详情”弹出模态窗口中展示所有字段，这样的话不能直观展示，并且需要弹出窗口再查看，字段较多的话还需要上下滑动查看，体验并不是很好。

查找了一下，实现了两种展示方式，一种是应用Transfer 穿梭框，另一种是Popover 弹出框。

先来方法一，应用Transfer 穿梭框：
html:

  设置

  
      
      
        确认
      
 

html中table同时做调整，每个el-table-column添加v-if="colData[0].show"，对应colData同位置字段。

js：

data() {
    return {
       dialogConVisible: false,//表头设置穿梭框默认
       colData: [{title: "员工编号",colIndex:0,show: false},
                {title: "岗位名称",colIndex:1,show: true},
                {title: "岗位编码",colIndex:2,show: true},
                {title: "施工类型",colIndex:3,show: true},
                {title: "状态",colIndex:4,show: true},
                {title: "状态时间",colIndex:5,show: true},
                {title: "岗位说明",colIndex:6,show: true},
                {title: "操作",colIndex:7,show: true}],
      defaultData: [1,2,3,4,5,6,7],//默认展示列对应colIndex
      selectCol:[],//选中展示列对应colIndex
  }
}

methods: {
    //新增
    saveColInfo(){
      let _this = this
      let selectCol = _this.selectCol
      this.colData.filter(i => {
        if (selectCol.indexOf(i.colIndex) != -1) {
           i.show = true;
        } else {
          i.show = false;
        }
      });
      _this.dialogConVisible = false
      console.log(this.colData)
    },

    handleSelectedValue(value, direction, movedKeys) {
       let _this = this
       //可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边,value值：右侧显示列名对应colIndex
       if(direction === "right") {
          _this.selectCol = value; console.log(_this.selectCol)
       }
       if(direction === "left") {
          _this.selectCol = value;
       }
    },
}

实现效果：

image.png

方法二：Popover 弹出框
html:同样在el-table-column添加v-if="colData[4].istrue"，然后：

    
      
    
     设置
 

js：

  data() {
    return {
      colData: [{title: "员工编号",istrue: true},
                {title: "员工名称",istrue: true},
                {title: "性别",istrue: true},
                {title: "组织机构",istrue: true},
                {title: "手机号",istrue: true},
                {title: "民族",istrue: true},
                {title: "地址",istrue: true},
                {title: "学校",istrue: true},
                {title: "邮箱",istrue: true}],
      colOptions: [],
      colSelect: [],
  }
}
 created() {
    //设置表头新增
    this.permissions=handleMenuPermission('system:organization:staff')//处理按钮权限
    var _this = this;
    for (let i = 0; i < _this.colData.length; i++) {
         _this.colSelect.push(_this.colData[i].title);
        if (_this.colData[i].title == '名称') { //初始化不想展示的列可以放在这个条件里
          continue;
         }
         _this.colOptions.push(_this.colData[i].title);

    }
  },
  //设置表头新增
  watch: {
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }
  },

实现效果：

image.png