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 = ate(el,{
ghostClass:'sortable-ghost',
elementui登录界面
setData:function(dataTransfer){
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.list.splice(evt.oldIndex, 1)[0];
this.list.wIndex, 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；
技术⽀持：