el-admin el-table表头列拖动功能

1、安装sortablejs
npm install sortablejs --save

2、在公共类src/components/Crud/CRUD.operation.vue中引入sortablejs。
修改代码，增加表头拖动功能。

import Sortable from 'sortablejs'
mounted() {
    this.columnDrop()
  },
/
/列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          // 根据中文label进行拖拉
          this.ColumnsDrop(evt.item.innerText,evt.newIndex)
        }
      })
    },

//新加方法 
    ColumnsDrop(oldText,newIndex) {
      const table = this.crud.props.table
      let myindex = -1 //空格
      let oldIndex1 = 0
      let  step = -1
      let count = 0
      //
      this.tableColumns.some((column,index) => {
          if(column.visible) {
            count++
          }
      })
      // 定位拖拉中文表头位置以及在该字段之前隐藏字段数量
      this.tableColumns.some((column,index) => {
        if(column.label === oldText) {
          oldIndex1 = index
          return true
        }else{
          // 空格在字段前面
          if(step>index){
            myindex++
          }
        }
        step++
      })
      if (myindex === -1  ) {
        myindex = 0
      }
      let item= this.tableColumns[oldIndex1]
      const vm = table.$children.find(e => e.prop === item.property)
      const columnConfig = vm.columnConfig
      /*this.tableColumns.splice(oldIndex1-1, 1)
      this.tableColumns.splice(myindex-1, 0, item)*/
      if(oldIndex1 <newIndex){ // 从左至右拖动
        vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex + 1 , null)
        vm.owner.store.commit('removeColumn', columnConfig, null)
      }else { //从右至左拖动
        vm.owner.store.commit('removeColumn', columnConfig, null)
        vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex  , null)
      }
      // 列重新排序
      this.ignoreNextTableColumnsChange = false
    },