Element表格拖拽排序

#添加highlight-current-row row-key="id" 属性 row-key='id'就知道原因了，由于vue加载循环机制，在进行删除的时候，一定要添加 key，就像我们使用vue的 v-for 循环一样需要添加绑定 key

<el-table :data="list" ref="dragTable" highlight-current-row row-key="id">
  <el-table-column label="id" width="60" prop="id"></el-table-column>
  <el-table-column label="name" prop="name"></el-table-column>
</el-table>

#引入import Sortable from 'sortablejs' #初始化排序方法 this.setSort();

import Sortable from 'sortablejs'

list:[
  {id:1,name:'aa'},
  {id:2,name:'bb'},
  {id:3,name:'cc'},
]

mounted(){
  this.setSort();
},

/**
 * 排序方法
 */
setSort(){
  const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
  this.sortable = Sortable.create(el,{
    ghostClass:'sortable-ghost',
    setData:function(dataTransfer){
      dataTransfer.setData('Text', '')
    },
    onEnd: evt => {
      const targetRow = this.list.splice(evt.oldIndex, 1)[0];
      this.list.splice(evt.newIndex, 0, targetRow);
    }
  })
},