vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui ) TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）_elementui自定义展示隐藏列

2023-10-18 TTable组件新增column–项中的isShowHidden属性（开启列设置时动态默认显示隐藏列）

最终效果如下

页面只需要设置两个参数(适用于element及antd)

columnSetting // 是否显示列设置按钮
// name="TtableColumnSet" // 区分储存本地表头数据（保证其唯一性）
无需name属性来确定唯一性（内置md5唯一，确保prop不可重复）
1
2
3

一、element具体代码如下

1、html（新建一个columnSet.vue页面）

<template>
  <el-dropdown trigger="click" placement="bottom">
    <el-button v-bind="columnBind">{{columnBind.btnTxt||'列设置'}}</el-button>
    <el-dropdown-menu divided slot="dropdown">
      <span class="title">{{columnBind.title||'列设置'}}</span>
      <draggable class="t_table_column_setting_dropdown" v-model="columnSet">
        <el-checkbox
          v-for="(col, index) in columnSet"
          :key="col.prop"
          @click.native.stop
          :checked="!col.hidden"
          @change="checked => checkChanged(checked, index)"
        >{{ col.label }}</el-checkbox>
      </draggable>
    </el-dropdown-menu>
  </el-dropdown>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、js

<script>
import draggable from 'vuedraggable'
import md5 from 'blueimp-md5'
export default {
  name: 'ColumnSet',
  components: {
    draggable
  },
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    columnSetBind: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      columnSet: null
    }
  },
  mounted() {
    this.columnSet = this.getColumnSetCache()
    this.$emit('columnSetting', this.columnSet)
  },
  computed: {
    columnBind() {
      const columnSetBind = { btnTxt: '列设置', title: '列设置', ...this.columnSetBind }
      return { size: 'small', icon: 'el-icon-s-operation', ...this.$attrs, ...columnSetBind }
    },
    localStorageKey() {
      // 配置数据缓存唯一标记
      return `t-ui:TTable.columnSet-${md5(
        this.columns.map(({ prop }) => prop).join()
      )}`
    }
  },
  watch: {
    columnSet(n) {
      this.$emit('columnSetting', n)
      localStorage.setItem(this.localStorageKey, JSON.stringify(n))
    }
  },
  methods: {
  // 获取缓存数据
    getColumnSetCache() {
      let value = localStorage.getItem(this.localStorageKey)
      let columnOption = this.initColumnSet()
      let valueArr = JSON.parse(value) || []
      // 动态显示追加的列
      columnOption.map(item => {
        let findEle = valueArr.find(ele => ele.label === item.label && ele.prop === item.prop)
        item.hidden = findEle ? findEle.hidden : false
      })
      // 动态默认勾选列选项
      this.initColumnSet().map(val => {
        columnOption.map(item => {
          if (Object.hasOwn(val, 'isShowHidden')) {
            if (val.label === item.label && val.prop === item.prop && val.isShowHidden) {
              item.hidden = val.isShowHidden
            }
            if (val.label === item.label && val.prop === item.prop && !val.isShowHidden) {
              item.hidden = val.isShowHidden
            }
          }
        })
      })
      value = JSON.stringify(columnOption)
      // console.log('最终--', value ? JSON.parse(value) : this.initColumnSet())
      return value ? JSON.parse(value) : this.initColumnSet()
    },
    initColumnSet() {
      const columnSet = this.columns.map((col, index) => (col.isShowHidden ? {
        label: col.label,
        prop: col.prop,
        hidden: false,
        isShowHidden: col.isShowHidden
      } : {
        label: col.label,
        prop: col.prop,
        hidden: false
      }))
      // console.log('initColumnSet---', columnSet)
      return columnSet
    },
    checkChanged(checked, index) {
      this.$set(this.columnSet, index, { ...this.columnSet[index], hidden: !checked })
      let obj = {}
      this.columnSet.map(val => {
        val.hidden in obj || (obj[val.hidden] = [])
        obj[val.hidden].push(val.hidden)
      })
      if (obj.false && obj.false.length < 2) {
        this.columnSet.map((val, key) => {
          if (!val.hidden) {
            this.$set(this.columnSet, key, { ...this.columnSet[key] })
          }
        })
      } else {
        this.columnSet.map((val, key) => {
          if (!val.hidden) {
            this.$set(this.columnSet, key, { ...this.columnSet[key] })
          }
        })
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

3、scss

<style lang="scss" scoped>
.el-dropdown-menu {
  padding: 15px;
  font-size: 14px;
  .title {
    font-weight: bold;
  }
  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #262626;
  }
  .t_table_column_setting_dropdown {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4、关于插件vuedraggable（为了方便antd），其实element可以用el-tree代替拖动

主要是：elementUI给了一个自定义节点的插槽，而antd没有，需要增加许多操作，才能满足
故：用了这个第三方插件

如何引入在table组件中

 <!--列设置按钮-->
        <column-set
          v-if="columnSetting"
          v-bind="$attrs"
          :columns="columns"
          @columnSetting="v => columnSet = v"
        />
1
2
3
4
5
6
7

计算属性中需要添加以下代码

 computed: {
    columnByProp () {
      return this.columns.reduce((acc, cur) => {
        acc[cur.prop] = cur
        return acc
      }, {})
    },
    renderColumns () {
      return this.columnSet.length > 0 ? this.columnSet.reduce((acc, cur) => {
        if (!cur.hidden) {
          acc.push(this.columnByProp[cur.prop])
        }
        return acc
      }, []) : this.columns
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最终Element table组件如图所示

二、antd具体代码

1、跟element一样只是table的column的参数不一样

elementUi的columns配置是{prop: ‘name’, label: ‘姓名’}

antdUi的columns配置是{dataIndex: ‘name’, title: ‘姓名’}

2、把el标签改成a开头

三、组件地址

gitHub组件地址

gitee码云组件地址

---

---

ElementUI table组件二次封装文档

---

antdUI table组件二次封装文档

---