element-ui el-table表头自定义配置，表格拖动排序

一 需求说明

      表格列太多，页面展示不下，希望可以对表头自定义配置，配置是否展示，宽度，顺序等等。配置绑定用户。

二 需求开发

   2.1在表头右侧添加按钮，使用caption元素，

createCaption() {
  const caption = document.createElement('caption'); // 创建元素
  caption.innerHTML = '<i class="el-icon-set-up"></i>'; // 图标样式
  document.querySelector('table').appendChild(caption); // 选择table标签并添加caption
  caption.addEventListener('click', () => { // 点击事件
    this.setTableHead();
  });
},

2.2 点击弹窗展示设置页面

 setTableHead() {
   this.tableHeadsListCopy = _.cloneDeep(this.tableHeadsList); // this.tableHeadsList是从后端接口获取的表头数据
   this.$refs.tableHead.isTableHead = true;
 },


// tableHeadsList示例
tableHeadsList: [
        { width: 'auto', isShow: true, isAuto: true, label: '新垣结一', prop: 'xxx' },
        { width: 'auto', isShow: true, isAuto: true, label: '石原里美', prop: 'xxx' },
        { width: 'auto', isShow: true, isAuto: true, label: '桥本爱', prop: 'xxx' },
        { width: 'auto', isShow: true, isAuto: true, label: '斋藤飞鸟', prop: 'xxx' }
      ],

<template>
  <div class="table-head">
    <el-dialog :close-on-click-modal="false" @opened="rowDrop" title="配置表头" :visible.sync="isTableHead" width="50%">
      <p class="tip">
        <i class="el-icon-s-opportunity"></i>
        <span> 可拖动行排序</span>
      </p>
      <el-table
        row-key="prop"
        :data="tableShowList">
        <el-table-column prop="label" label="表头名称" align="center"></el-table-column>
        <el-table-column label="是否显示" width="120" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isShow"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="调整顺序" width="120" align="center">
          <template slot-scope="scope">
            <i class="el-icon-rank"></i>
          </template>
        </el-table-column>
        <el-table-column label="调整表头宽度">
          <template slot-scope="scope">
            <div class="flex-col">
              <div>
                <el-radio v-model="scope.row.isAuto" :label="true">自适应</el-radio>
              </div>
              <div>
                <el-radio v-model="scope.row.isAuto" :label="false">固定宽度</el-radio>
                <el-input-number v-show="!scope.row.isAuto" v-model="scope.row.width" size="mini" controls-position="right" :min="100" :max="300"></el-input-number>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer tc">
        <el-button size="medium" class="btn-wh" @click="isTableHead = false">关闭</el-button>
        <el-button size="medium" class="btn-blue" type="primary" @click="saveTableHead()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
  name: "tableHead",
  props: {
    tableShowList: Array
  },
  data() {
    return {
      isTableHead: false
    };
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector('.table-head .el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableShowList.splice(oldIndex, 1)[0];
          _this.tableShowList.splice(newIndex, 0, currRow);
        }
      });
    },
    saveTableHead() {
      this.isTableHead = false;
      this.$emit('saveTableHead', this.tableShowList);
    },
  }
};
</script>

<style lang="scss" scoped>
.table-head {

  .tip {

    i {
      color: #E6A23C;
    }

    font-size: 14px;
    padding-bottom: 10px;
  }

  .el-icon-rank {
    font-size: 18px;
    margin-left: 20px;
    cursor: move;
  }

  .point {
    color: #66b1ff;

    &:hover {
      color: #1A3679;
    }
  }
}
</style>

Sortable.js中文网|配置    sortablejs文档

参考的文档：element表格行列拖拽_寻梦无痕的博客-CSDN博客 element表格行列拖拽

2.4表格主页面

<el-table ref="table"
                class="collect-table"
                :resizable="true"
                v-loading="isTableData"
                stripe
                @filter-change="filterTable"
                @sort-change="sortChange"
                :header-cell-class-name="headCell"
                :border="true"
                :data="tableData">
        <el-table-column v-for="item in tableHeadsList.filter(item => item.isShow)"
                         :key="item.prop"
                         :width="item.isAuto ? 'auto' : item.width"
                         :filters="filtersCom(item.prop)"
                         :column-key="item.prop"
                         sortable
                         :prop="item.prop"
                         :label="item.label">
          <template slot-scope="scope">
            <span v-if="item.prop === 'agentStatus'">{
   
   {scope.row.time | timeFilter}}</span>
            <span v-else>{
   
   {scope.row[item.prop] || '无'}}</span>
          </template>
        </el-table-column>
      </el-table>

<table-head ref="tableHead" @saveTableHead="saveTableHead" :tableShowList="tableHeadsListCopy"></table-head>



// methods

 setTableHead() {
   this.tableHeadsListCopy = _.cloneDeep(this.tableHeadsList); // this.tableHeadsList是从后端接口获取的表头数据
   this.$refs.tableHead.isTableHead = true;
 },

createCaption() {
  const caption = document.createElement('caption'); // 创建元素
  caption.innerHTML = '<i class="el-icon-set-up"></i>'; // 图标样式
  document.querySelector('table').appendChild(caption); // 选择table标签并添加caption
  caption.addEventListener('click', () => { // 点击事件
    this.setTableHead();
  });
},

saveTableHead(val) { // 子组件传递过来的保存事件，这里是前端测试版，所以没调用接口
   this.tableHeadsList = [];
   const data = val;
   if (data.every(i => !i.isAuto)) { // 都设定固定宽的话让最后一个表头宽度为自适应
     data[data.length - 1].isAuto = true;
   }
   setTimeout(() => {
     this.tableHeadsList = _.cloneDeep(data);
   });
 },