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

相关推荐
Focus_2 分钟前
SSE+broadcastChannel
前端
zabr4 分钟前
前端已死?我用 Trae + Gemini 零代码手搓 3D 塔罗牌,找到了新出路
前端·人工智能·aigc
Aotman_5 分钟前
Vue MutationObserver 监听
前端·javascript·vue.js·elementui·前端框架·ecmascript
专注前端30年9 分钟前
Vue3的生命周期钩子有哪些变化?
前端·javascript·vue.js
一 乐25 分钟前
健身房预约|基于springboot + vue健身房预约小程序系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习·小程序
VcB之殇1 小时前
popstate监听浏览器的前进后退事件
前端·javascript·vue.js
宁雨桥1 小时前
Vue组件初始化时序与异步资源加载的竞态问题实战解析
前端·javascript·vue.js
成为大佬先秃头2 小时前
渐进式JavaScript框架:Vue 过渡 & 动画 & 可复用性 & 组合
开发语言·javascript·vue.js
JIngJaneIL2 小时前
基于java+ vue家庭理财管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
GISer_Jing2 小时前
Taro跨端开发实战:JX首页实现_Trae SOLO构建
前端·javascript·aigc·taro