当前位置: 首页 > article >正文

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

如图所示:

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

最后发现没有设置 el-table 属性 row-key ,即行数据的 Key,用来优化 table 的渲染;
在这里插入图片描述

属性 row-key 描述如下:
在这里插入图片描述
一定要设置

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


http://www.kler.cn/a/320129.html

相关文章:

  • RabbitMQ(三)
  • stack_queue的底层,模拟实现,deque和priority_queue详解
  • 青少年编程与数学 02-006 前端开发框架VUE 22课题、状态管理
  • 长安“战疫”网络安全公益赛的一些随想
  • OPT: Open Pre-trained Transformer语言模型
  • 【微服务】面试题 5、分布式系统理论:CAP 与 BASE 详解
  • SSH 远程连接到 Linux 服务器上的 SQLite
  • 数据结构——广义表
  • uni-app+vue3微信小程序怎么获取 this.getTabBar()
  • 计算机网络(九) —— Tcp协议详解
  • Redisson分布式锁的概念和使用
  • Github 2024-09-25 C开源项目日报 Top9
  • Visual Studio Code的常用快捷键
  • 微服务3:微服务间接口远程调用(同步通信方式)
  • Git从了解到操作
  • layer弹层组件全面使用说明
  • 重修设计模式-概览
  • Springboot使用内置对象HttpServletRequest、HttpServletResponse
  • mysql查询某个库下所有表的数据量
  • 【深度学习】03-神经网络 5 (完结篇) 一文讲解 pytroch手机价格神经网络分类与准确率优化案例
  • 【nrm】npm 注册表管理器
  • react中diff的选择性子树渲染
  • Redis 键值对数据库学习
  • Recorder录音插件使用日记
  • Qt5.15和Qt6.7配置Android开发环境
  • 【设计模式-状态模式】