关于ElementUI表格-表头排序显隐实现

实现表头可以拖拽排序和控制表头显隐功能的组件

1. 实现效果
   
2. html部分

  <div class="lui-container">
      <el-table
        ref="tableList"
        v-loading="tableListLoading"
        :data="tableList"
        tooltip-effect="dark"
        border
        fit
        width="100"
      >
       <el-table-column
          type="selection"
          width="55"
        />
        <template v-for="(item,index) in columns">
          <el-table-column v-if="item.isShow" :key="index" :label="item.text" :prop="item.prop" min-width="180px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="['createTime','updateTime'].includes(scope.column.property)">
                {{ dateFormat(scope.row[scope.column.property]) }} // 处理内容展示格式
              </span>
              <span v-else>
                {{ scope.row[scope.column.property] }}
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          width="150px"
          align="center"
        >
          <template slot="header">
            <el-popover placement="bottom" title="筛选列" trigger="click">
              <span slot="reference">操作<i class="el-icon-arrow-down" style="font-weight: bold;" /></span>
              <div>
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-scrollbar style="height: 200px" class="table-box-scroll">
                  <Container lock-axis="y" @drag-end="tableUpdate" @drop="onDrop">
                    <Draggable v-for="column in columns" :key="column.text">
                      <el-checkbox :value="column.isShow" :label="column.text" :disabled="defaultList.includes(column.prop)" @change="handleCheckedColumnChange(column.isShow,column.prop)" />
                    </Draggable>
                  </Container>
                </el-scrollbar>
              </div>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <el-tooltip class="item" effect="dark" :content="$t('global.common-000037') /**国际化: 编辑 */"
                            placement="top-start">
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    @click="editRow({activeName, type: 'edit', data: scope.row})"
                  />
                </el-tooltip>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

3. js部分

import { Container, Draggable } from 'vue-smooth-dnd'
components: {
    Container,
    Draggable
  }
   data() {
    return {
     checkAll: false,
     defaultList: ['spCode', 'unCode', 'priority', 'operation'],
      columns: [
        { prop: 'spCode', isShow: true, text: this.$t('global.dockingManager-000001') },
        { prop: 'unCode', isShow: true, text: this.$t('global.dockingManager-000675') },
        { prop: 'operation', isShow: true, text: this.$t('global.dockingManager-000664') },
        { prop: 'priority', isShow: true, text: this.$t('global.dockingManager-000683') },
        { prop: 'createTime', isShow: false, text: this.$t('global.dockingManager-000010') },
        { prop: 'createUser', isShow: false, text: this.$t('global.dockingManager-000009') },
        { prop: 'updateTime', isShow: false, text: this.$t('global.dockingManager-000012') },
        { prop: 'updateUser', isShow: false, text: this.$t('global.dockingManager-000011') },
      ],
    }
    }
    mounted() {
    this.allCheckedFun()
  },
    methods:{
    onDrop(dropResult) {
      this.columns = this.applyDrag(this.columns, dropResult)
      localStorage.setItem('dangerousTableColumns', JSON.stringify(this.columns))
      this.$refs.tableList.doLayout()  // 从心加载表格布局
    },
    applyDrag(arr, dragResult) {
      const { removedIndex, addedIndex, payload } = dragResult
      console.log(removedIndex, addedIndex, payload)
      if (removedIndex === null && addedIndex === null) return arr

      const result = [...arr]
      let itemToAdd = payload

      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0]
      }

      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd)
      }

      return result
    },
    allCheckedFun() {
      const tableColumns = localStorage.getItem('dangerousTableColumns')
      if (tableColumns) {
        this.columns = JSON.parse(tableColumns)
        this.$refs.tableList.doLayout()
      }
      const status = this.columns.map((item) => { return item.isShow })
      this.checkAll = !status.includes(false)
    },
    handleCheckAllChange(val) {
      if (val) {
        this.columns.map((item) => {
          item.isShow = true
        })
      } else {
        this.columns.map((item) => {
          if (this.defaultList.includes(item.prop)) {
            item.isShow = true
          } else {
            item.isShow = false
          }
        })
      }
      localStorage.setItem('dangerousTableColumns', JSON.stringify(this.columns))
      this.$refs.tableList.doLayout()
    },
    handleCheckedColumnChange(tar, val) {
      this.columns.map((item) => {
        if (item.prop === val) {
          item.isShow = !tar
        }
      })
      const status = this.columns.map((item) => { return item.isShow })
      this.checkAll = !status.includes(false)
      localStorage.setItem('dangerousTableColumns', JSON.stringify(this.columns))
      this.$refs.tableList.doLayout()
    },
    tableUpdate() {
      console.log(this.columns)
    },
    }