element table 拖拽排序问题

1. 需要引用sortablejs
2. GitHub地址

//安装sortable.js
Install with NPM:

$ npm install sortablejs --save

//在组件内引入
import Sortable from 'sortablejs'

//为需要拖拽排序的表格添加ref属性
<el-table  ref="dragTable">
//在数据渲染完毕添加拖拽事件
created(){
   this.layerAddQuick()
},
async layerAddQuick(dataJson){
        this.dragJson = dataJson;
        let param = { 
          app_id : dataJson.app_id,
          ad_type_id : dataJson.ad_type_id,
          layer_id : dataJson.layer_id ,
          date : ""
        }
        const { data,code,msg } = await layerIndex(param);
        if(code == 0){
          this.tableData = data.list;
          this.loadingDrag = false;
          //关键
          this.$nextTick(() => {
            this.setSort()  //数据渲染完毕执行方法
          })
        }else{
          this.$baseMessage(msg,"error")
          setTimeout(() => {
            this.loadingDrag = false;
          }, 6000);
        }
      },

setSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll(
        		'.el-table__body-wrapper > table > tbody'
        )[0];
        this.sortable = Sortable.create(el, {
        	// Class name for the drop placeholder,
        		ghostClass: 'sortable-ghost', 
                setData: function(dataTransfer) {
                dataTransfer.setData('Text', '')
            },
           //拖拽结束执行,evt执向拖拽的参数
           onEnd: evt => {
              //判断是否重新排序
              if(evt.oldIndex !== evt.newIndex){
                  let data = {
                     id:this.tableData[evt.oldIndex].id,
                     banner_order:evt.newIndex
                  }
                  console.log(data);
                  //数据提交失败则恢复旧的排序
                  // apiPutBanner(data).catch(()=>{
                  //    const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
                  //    this.tableData.splice(evt.newIndex, 0, targetRow);
                  // })
              }
            }
        })
      },