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

相关推荐
Revio Lab17 分钟前
把 AI 生成的 HTML 当 Markdown 来管:Web-Doc 自托管文档站实践
前端·html·mcp·html文档
之歆28 分钟前
DAY_13DOM操作完全指南DOM基础API与节点操作(上)
开发语言·前端·javascript·ecmascript
zhoumeina9931 分钟前
如何保证不同位置切换合成底图的渲染顺序
java·前端·javascript
海上彼尚34 分钟前
Nodejs也能写Agent - 3.基础篇 - Tools 与 Tool Calling
前端·人工智能·后端·node.js
用户1257585243638 分钟前
GoFrame + Vue3 后台管理框架,CRUD 代码生成器一键搭 RBAC 权限系统
前端
七十二時_阿川39 分钟前
Electron 如何自定义菜单?这篇帮你实现原生体验!
前端·electron
七十二時_阿川44 分钟前
Electron App 速查表:生命周期事件、方法、平台差异
前端·electron
七十二時_阿川44 分钟前
Electron 多显示器开发?这篇帮你搞定屏幕坐标与窗口定位!
前端·electron
七十二時_阿川1 小时前
Electron Tray API 详解:托盘图标、右键菜单、气泡通知
前端·electron
番茄炒韭菜1 小时前
windows10下安装mise
前端