《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适用)》

相关推荐
yingyima25 分钟前
Unix 时间戳转换实战:一次差点毁掉项目的低级错误
前端
盼兮1 小时前
用AI编程从零搭建一个响应式数据看板
前端·人工智能·数据可视化
Lan.W1 小时前
vue3-element-admin里新增mock接口一直没有生成,不生效
前端·javascript·vue.js·mock
小满zs1 小时前
Next.js部署(Vercel)
前端·next.js
仙古.梦回~1 小时前
vue-skills
前端·javascript·vue.js
倒霉熊dd1 小时前
Python 学习(第二部分:函数、模块与面向对象编程)
前端·数据库·python
gCode Teacher 格码致知1 小时前
Javascrip提高:CSS backdrop-filter的使用方法-由Deepseek产生
前端·css
清灵xmf2 小时前
JS 原生深拷贝的终极方案——structuredClone
前端·javascript·vue.js·json.stringify·structuredclone
前端 贾公子2 小时前
响应式系统基础:依赖追踪的基础 —— 发布订阅模式(前端应用最广的设计模式)上
javascript·vue.js
索西引擎2 小时前
【理论】TypeScript 函数重载:从 Vue 3 defineEmits 说起的类型安全实践
前端·typescript