如图所示:
- 把第一行拖到最后一行,鼠标
up
; - 该行莫名其妙的跳到倒数第二行;
最后发现没有设置 el-table
属性 row-key ,即行数据的 Key
,用来优化 table
的渲染;
属性 row-key 描述如下:
一定要设置
<el-table class="my-table" :data="tableData" style="width: 100%" row-key="id"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" />
</el-table>
PS:如果想进一步了解如何实现,请移步 《ElementUI/Plus:el-table + sortablejs 实现 row 拖动改变顺序(Vue2/3适用)》