el-table表格行拖拽排序或者电子件列表拖拽排序

用到sortablejs 中文官网，http://www.sortablejs.com/

为了页面中可以复用，在common.js下，封装了公用方法

import Sortable from ‘sortablejs’rowDrop(selector,params,callback){
 
let tbody = document.querySelector(selector)
if(!tbody){
return
}
if(window.tableSortable){
  window.tableSortable.destroy()
  window.tableSortable =null
}window.tableSortable=Sortable.create(tbody, { 　　　　       handle: ".my-handle",        animation: 150,        ...params,        onEnd ({ newIndex, oldIndex }) {          callback(newIndex, oldIndex)        }       }) }//指定只有定义my-handle的div才能执行拖拽操作

页面中使用需要注意几点

1、表格需要定义一个class，便于指定拖拽哪个表格里的行

2、需要定义row-key，唯一的,一般定义为syscode

3、在获取表格数据后，初始化拖拽方法

4、操作列需要加入拖拽图标

<el-table class="tableClass" row-key="syscode" :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"><br>    <template>        <i class="my-handle iconfont my-icon"></i><br>    </template> </el-table-column></el-table><br><br>

1	`在methods中定义`

initDrop(){
   const _this =this
　　this.common.rowDrop('.tableClass .el-table__body-wrapper tbody',{},(newIndex, oldIndex)=>{
　   　let currRow = _this.tableData.splice(oldIndex, 1)[0]
       _this.tableData.splice(newIndex, 0, currRow)
　   　_this.updateSortSno(_this.tableData) 
      //调取更新排序接口
   })
}，
updateSortSno(newlist){
  // 传参，需要把新的数组转成JSON字符串，JSON.stringify（newlist）
  // 调取接口
}

如果是div拖拽，需要注意的点

1、外层div，定义class，用来初始化拖拽

2、内层需要拖拽的div，也就是for循环的div，需要定义 key为唯一的值

<div class="efileList">
    <div class="item" v-for="(item,index) in fileList" :key="item.syscode">
        {{itemfileName}}
        <i class="my-handle iconfont my-icon"></i>
    </div>
</div>

　　在methods中定义

initDrop(){
   const _this =this
　　this.common.rowDrop('.efileList',{
       draggable: ".item" 
    },(newIndex, oldIndex)=>{
　   　let currRow = _this.tableData.splice(oldIndex, 1)[0]
       _this.tableData.splice(newIndex, 0, currRow)
　   　_this.updateSortSno(_this.tableData) 
   })
}，
//只有定义item的class才能被拖动
  
updateSortSno(newlist){
   //传参，需要把新的数组转成JSON字符串，JSON.stringify（newlist）
   //调取接口
}