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

相关推荐
沛沛老爹几秒前
Web开发者快速上手Advanced RAG:索引优化原理与实践
前端·数据库·advanced rag·深度优化·web转型ai
跟着珅聪学java1 分钟前
Vue 和 React 优缺点
前端·javascript·vue.js
哟哟耶耶14 分钟前
component-svg圆环进度百分比图(顶部文本,中间图形,底部文本)
前端·css·echarts
不想秃头的程序员18 分钟前
Vue3 中的 <keep-alive> 详解
前端·vue.js
其尔Leo18 分钟前
Vue3可动态添加行el-table组件
前端
紫小米18 分钟前
webpack详解和实操
前端·webpack·node.js
不想秃头的程序员22 分钟前
JavaScript 中的深拷贝与浅拷贝详解
前端·面试
风止何安啊24 分钟前
用 10 行代码就能当 “服务器老板”+“网络小偷”+“文件管家”?Node.js:别不信!
前端·javascript·node.js
昨晚我输给了一辆AE8624 分钟前
react-hook-form 初始化值为异步获取的数据的最佳实践
前端·react.js·强化学习
用户8417948145624 分钟前
vue 表格 vxe-table 实现前端分页、服务端分页的用法
vue.js