element table拖拽

需求：实现表格的拖拽，然后数据重新排序

1.首先安装sortable这个插件

npm install sortable.js --save

2.然后在你所需要的页面引入

import Sortable from 'sortablejs'

3.method写一个方法

 initSort () {
      const sortTable = this.$refs.multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      Sortable.create(sortTable, {
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
          const { newIndex, oldIndex } = evt;
          let arr = this.tableData.map(v =>{
            let { id,sort } = {...v}
            let obj = { id,sort}
            return obj
          })
          if(oldIndex > newIndex) {
            let sort_ = arr[newIndex].sort
            for(let i = 0; i < arr.length; i++) {
                 if(i >= newIndex && i < oldIndex) {
                    arr[i].sort = arr[i+1].sort
                 }else if(i == oldIndex) {
                    arr[oldIndex].sort = sort_
                 }
            }
          }else{
            let sort_ = arr[newIndex].sort
            for(let i = newIndex; i >= 0; i--) {
                 if(i == oldIndex) {
                    arr[i].sort = sort_
                    break
                 }else{
                   arr[i].sort = arr[i-1].sort
                 }
            }
          }
          let arrObj = {}
          for(let i = 0; i< arr.length; i++) {
              arrObj[arr[i].id] = arr[i].sort
          }
          this.tableData = [];
          changeNewsSort(arrObj).then(() => {
            this.$message.success('修改成功');
            this.getList();
          })
        }
      })
    },

4.将这个方法放在获取表格数据的的方法调用

说明：表格排序是后端做的，根据排序的大小排，越大的排在前面，小的排后面。
举例：a b c d e,把d放到b的位置，d的排序值要变成b的排序值，而b的排序值就是它下一位c的排序值，c的排序值就是原来d的排序值，a和e位置不变所以排序值也不用变。这种情况是oldIndex > newIndex（把表格的某一行从下往上拖）

  let sort_ = arr[newIndex].sort
     for(let i = 0; i < arr.length; i++) {
            if(i >= newIndex && i < oldIndex) { // 旧和新之前的sort需要改变
               arr[i].sort = arr[i+1].sort
            }else if(i == oldIndex) {
               arr[oldIndex].sort = sort_ //就是把d的sort变成b的
            }
       }

另一种情况就是oldIndex < newIndex(把表格的某一行从上往下拖拽)

let sort_ = arr[newIndex].sort
     for(let i = newIndex; i >= 0; i--) {//遍历到过来
            if(i == oldIndex) {
               arr[i].sort = sort_
               break
            }else{
              arr[i].sort = arr[i-1].sort //旧和新的之间的sort，都是前一位的sort
            }
       }

把表格的数据中的id和sort重新提交给后端进行重新排序。这就完成了表格的拖动排序