设置el-table表头自定义显示

1.创建一个<TableColumnSettings.vue>组件

<template>
  <el-popover placement="bottom" title="Column Settings" width="auto !important" trigger="click">
    <el-tree ref="tree" :data="treeData" show-checkbox node-key="prop" :check-on-click-node="true" default-expand-all :default-checked-keys="checkedKeys" :props="treeProps" @check="changeCheck">
    </el-tree>
    <el-button slot="reference" type="primary" plain size="mini" icon="el-icon-check">Column Settings</el-button>
  </el-popover>
</template>
<script>
export default {
  name: 'TableColumnSettings',
  props: {
    name: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      allTreeNodes: [], // 平铺树节点
      checkedKeys: [], // 选中的值
      uncheckedKeys: [] // 未选中的值（包含半选）
    }
  },
  watch: {
    columns: {
      immediate: true,
      handler (val) {
        if (val && val.length) {
          this.init()
        }
      }
    }
  },
  methods: {
    async init () {
      const _this = this
      this.treeData = [...this.columns]

      // 默认全选
      this.allTreeNodes = []
      this.checkedKeys = []
      function loopTreeChild (arr) {
        if (arr && arr.length) {
          arr.forEach(item => {
            _this.allTreeNodes.push(item)
            _this.checkedKeys.push(item.prop)
            if (item.children && item.children.length) {
              loopTreeChild(item.children)
            }
          })
        }
      }
      loopTreeChild(this.treeData)

      // 从local Storage中获取隐藏列信息
      const obj = this.$Utils.getLocal('tableColumnHide') || {}
      if (this.treeData.length && Object.keys(obj) && obj[this.name] && obj[this.name].length) {
        this.uncheckedKeys = obj[this.name]
        this.checkedKeys = this.checkedKeys.filter(item => !this.uncheckedKeys.includes(item))
        // 获取不包含半选中的未选中项
        this.allTreeNodes.forEach((node) => {
          if (this.checkedKeys.includes(node.prop)) {
            this.$set(node, 'checked', true)
            if (node.pid) {
              this.loopPidCheck(node.pid)
            }
          }
        })
        // 获取真正未选中的节点（不包含半选），将其赋给父组件的表格列
        const trueUncheckedKeys = this.allTreeNodes.filter(i => !i.checked).map(i => i.prop)
        this.$emit('change', [...trueUncheckedKeys])
      }
    },
    // 递归父
    async loopPidCheck (id) {
      this.allTreeNodes.forEach(i => {
        if (i.id === id) {
          this.$set(i, 'checked', true)
          if (i.pid) {
            this.loopPidCheck(i.pid)
          }
        }
      })
    },
    changeCheck (data, checkedNodes) {
      const _this = this
      this.checkedKeys = [...checkedNodes.checkedKeys]
      // 先存local Storage
      const obj = this.$Utils.getLocal('tableColumnHide')
      this.uncheckedKeys = []
      function loopUncheckedChild (arr) {
        if (arr && arr.length) {
          arr.forEach(item => {
            if (!_this.checkedKeys.includes(item.prop)) {
              _this.uncheckedKeys.push(item.prop)
            }
            if (item.children && item.children.length) {
              loopUncheckedChild(item.children)
            }
          })
        }
      }
      loopUncheckedChild(this.treeData)
      this.$Utils.setLocal('tableColumnHide', { ...obj, [this.name]: [...this.uncheckedKeys] })

      // 更新父组件的表格列
      this.$nextTick(() => {
        // 从未选中组里过滤掉半选中
        const nodes = this.$refs.tree.getHalfCheckedKeys()
        const keys = this.uncheckedKeys.filter(item => !nodes.includes(item))
        this.$emit('change', keys)
      })
    }
  }
}
</script>
<style>
</style>

2.页面上引用

<TableColumnSettings name="DatasetManagement" :columns="columns" @change="changeTableColumns" />

import TableColumnSettings from '@/components/TableColumnSettings'

components: {
    TableColumnSettings
}

columns: [
        {
          label: 'name',
          prop: 'name'
        },
        {
          label: 'description',
          prop: 'desc'
        },
        {
          label: 'status',
          prop: 'status'
        },
        {
          label: 'createDate',
          prop: 'createDate'
        }
      ],
      hideColumns: [],

changeTableColumns (data) {
      this.hideColumns = [...data]
    }