Sortablejs实现vue项目表格拖动排序

<template>
   <div class="main-content">
        <el-table
          ref="multipleTable"
          :data="tables"
          border
          fit
          highlight-current-row
          row-key="id"       
          
        >
          <el-table-column>11</el-table-column>
          <el-table-column>22</el-table-column>
          <el-table-column>33</el-table-column>
       </el-table>
  </div>
</template>

<script>

import Sortable from 'sortablejs'   //下载插件命令：npm install sortablejs --save
​
export default {
data(){
  return{
    tables:[],     //保存表格显示数据
    rowSortOld:[], //保存表格行拖动前：id顺序数组（旧）
    rowSortNew:[]  //保存表格行拖动后：id顺序数组（新）
  }
},
    
mounted() {
  //阻止默认行为
   = function (event) {
     ();
     ();
  };
  //列表行拖拽后顺序数组
  ();
},
    
methods: {
  //表格行拖拽
  rowDrop() {
    //获取表格对象
    const tbody = ('#tableRowDrop tbody');
    const _this = this;  //（注意此处引用）
    (tbody, {
        onEnd({ newIndex, oldIndex }) {
           const currRow = _this.(oldIndex, 1)[0];
           _this.(newIndex, 0, currRow);
        }
        
        //保存列表拖拽后顺序
        _this.rowSortNew = []; //每次列表拖拽前，清空上次数据
        for(let i in _this.tables){//多个对象需遍历赋值
            _this.(_this.tables[i]['id']);
        }
        //列表拖拽后顺序
        _this.updateTableSort(_this.rowSortNew);
    })
  },
      
  //列表拖拽后顺序
  updateTableSort(rowSortNew){
    //控制台输出对比前后顺序  
    ('列表拖拽前顺序id数组：'+);
    ('列表拖拽后顺序id数组：'+rowSortNew);
    const formData = new FormData();
    //此处封装便于传递给后台
    ('rowSortOld',());
    ('rowSortNew',(rowSortNew));
  },
  
  //获取表格渲染数据
  getList() {
    apiGet(this, ).then((res) => {
        = ;
       //保存列表拖拽前顺序id（注：此ID为列信息中的ID，多个对象需遍历赋值）
       for(let i in ){
           ([i].id);
       }
    });
  }
}

</script>