《ElementUI/Plus 踩坑》el-table + sortablejs 拖拽顺序错乱(Vue2/3适用)

如图所示:

  • 把第一行拖到最后一行,鼠标up
  • 该行莫名其妙的跳到倒数第二行;

最后发现没有设置 el-table 属性 row-key ,即行数据的 Key,用来优化 table 的渲染;

属性 row-key 描述如下:

一定要设置

html 复制代码
<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适用)》

相关推荐
缘月叙文几秒前
vue2项目实现国际化(若依框架示例)
vue.js
QGC二次开发几秒前
Vue3:v-model实现组件通信
前端·javascript·vue.js·前端框架·vue·html
努力的小雨1 小时前
从设计到代码:探索高效的前端开发工具与实践
前端
小鼠米奇1 小时前
详解Ajax与axios的区别
前端·javascript·ajax
Bunury2 小时前
Vue3新组件transition(动画过渡)
前端·javascript·vue.js
zero.cyx2 小时前
JS函数部分
开发语言·前端·javascript
超级小的大杯柠檬水2 小时前
SpringBoot lombok(注解@Getter @Setter)
java·前端·spring
louqle2 小时前
vue2:树形控件el-tree中加载两种不同结构的数据
javascript·vue.js·elementui
蓝染-惣右介2 小时前
【若依RuoYi-Vue | 项目实战】帝可得后台管理系统(二)
java·前端·后端·vue·springboot