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；

 技术支持：昆明网站建设公司

转载于:https://www.cnblogs.com/e0yu/p/11163924.html