elementui---表格拖動排序的問題

剛剛用elementui的表格，需要用到一個拖動排序的需求，簡單弄了下，使用 Sorttable 來做還是挺快的，但是發現一個問題，拖動排序顯示不正常。

<el-table :data="list" ref="dragTable" highlight-current-row >
  <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'

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);
    }
  })
},

按照正常邏輯，這樣寫是沒有問題，但是在具體使用的時候，發現排序不成功，測試了半個小時沒有發現問題，查看demo，發現table少了 row-key='id' 

<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>

究其原因：其實看到 row-key='id'就知道原因了，由於vue加載循環機制，在進行刪除的時候，一定要添加 key，就像我們使用vue的 v-for 循環一樣需要添加綁定 key；

 技術支持：昆明網站建設公司