Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码

已于 2025-01-19 16:55:32 修改
阅读量1.1w 收藏 6
点赞数 6
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： vue3.js element plus Table表格组件 el-table 拖曳排序改变表格行顺序 复杂二级嵌套表格拖动排序教程 排序后无法拿到数据和对接问题
于 2024-07-10 17:13:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/140326529
版权
+ Vue3 同时被 2 个专栏收录
254 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue3 开发问题汇总
147 篇文章 ¥9.90 ¥99.00
订阅专栏

前言

网上的教程太乱，全是仅能换顺序且从没考虑过数据更新、二级嵌套表格、树tree复杂表格等问题，本文提供完美解决方案。

在 vue3 + element-plus 开发中，详解 el-table 表格组件拖动排序功能，完成表格列表拖曳排序效果，无论是嵌套带有下级的表格，还是复杂的树形折叠多级联动的展开表格都可以自动计算并重新排序，排序后拿到列表id或整行数据轻松对接后端接口，表格行拖拽时带有过渡动画，支持是否开启启用和关闭表格排序的开关，适用于任何表格排序场景。

您直接复制代码运行即可，新手小白简单换下数据就能轻松搞定。

如下图所示，拖动排序丝滑流畅不卡顿，数据更新对接也非常轻松。

详细示例代码及注释，无论js/ts都可以使用，nuxt3也能用！

在这里插入图片描述

第一步

完整示例代码如下，

了解本专栏 订阅专栏 解锁全文
Vue - 列表拖曳排序 / 鼠标拖动改变顺序排列高效简洁组件（支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无 BUG）
王二红
09-03 4523
Vue-高效简洁列表拖曳排序/鼠标拖动改变顺序排列组件支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无BUG列表拖曳排序插件vuedraggable拉动拽动拖动顺序改变排序js,vue.js,nuxt.js列表如何实现鼠标拖曳改变顺序排列支持滚动条内复杂数据对象带拖动效果动画排序完毕自动排列数组位置克隆Vue.Draggable官方文档教程SortableJS与vuedraggable列表拖动排序Vue拖拽组件库vuedraggable的安装与使用用户用鼠标拖动排序功能源码最好
vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能，vue3 Table表格拖拽排序，表格每行使用鼠标拖动进行排序功能，表格拖拽排序实现（详细示例代码，一键复制开箱即用
热门推荐
高级前端工程师
03-23 1万+
vue3，elementPlus，el-table，typescript，表格组件，Table表格，表格拖动排序，表格拖曳排序，鼠标拖拽表格进行排序功能，elementplus表格如何实现拖动每行进行排序操作，表格拖动改变顺序，鼠标拖曳，表格内的数据项拖拽排序，vue3如何实现element-Plus表格组件进行表格内的数据项拖拽排序，列表拖拽排序效果，实现table动态拖拽，鼠标拖着排序，vue3 element Plus 表格拖曳拖动拖拽 排序，el-table拖拽排序实现，表格内容拖拽重新排序，树形表
Element Plus 表格拖拽排序方案
最新发布
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
04-16 1240
​​优先选 el-table​​：若项目已稳定使用 Element Plus，且拖拽需求简单，通过 Sortable.js 实现更轻量。​​优先选 Vxe Table​​：若项目允许引入新组件库，或需要行列拖拽、树形拖拽等高级功能，Vxe 的开发效率更高。​​数据唯一性​​：确保row-key或useKey配置唯一标识​​样式优化​​：通过 CSS 调整拖拽占位符（如​​异步提交​​：拖拽完成后可调用接口更新后端数据。
vue3+element-plus实现table表格整列的拖拽
qq_41713136的博客
08-02 2646
Vue3+Element-Plus+Vite el-table 拖拽排序实现，Vue3项目sortablejs的安装与使用
做笔记/记录遇到的前端bug
10-26 9165
Vue3项目中 el-table 实现拖拽排序，并实现边拖拽边滚动。 图文详解，Vue3项目中如何使用 sortablejs并完成utils封装
vue3+element-plus Sortable 实现table拖拽排序
qq_42600647的博客
06-15 1982
在setup()中编写行拖拽的实现方法，具体逻辑是创建一个Sortable的实例，将需要拖拽的元素给到Sortable实例，进行需要的配置，然后在拖拽结束的方法onEnd()中实现改变排序的逻辑(需要在dom后去调用，获取列表后.then里面也可以)。el-table中配置 给个row-key,且必须是唯一的，比如ID，否则会出现排序不对的情况。如果需要加拖拽图标配置handle添加了 .drag-handler。页面代码里面需要安装@element-plus/icons-vue。
element-ui el-table 拖拽排序
qq_52189813的博客
08-24 5410
当使用表格组件，需要完成拖拽排序时，可以使用一个强大的js拖拽库SortableJS更详细的使用文档sortable.js中文文档该js拖拽库配置很简单，同样也很容易上手，官网提供了很多拖拽demo。
Vue3 elementPlus el-table 拖拽排序
m0_62959350的博客
09-25 1421
【代码】elementPlus Table 拖拽排序。
Vue3 + El-Plus 实现表格行拖拽功能
FitnessSnail的博客
12-19 4909
这里项目只需要一个地方用到，就没有封装成组件，直接在用到的.vue文件中写了。在使用的 .Vue 文件中导入。
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
vue3 elementui-plus table 拖拽排序
qq_52189813的博客
08-23 780
在vue3中element ui-plus 表格拖拽排序，我使用的是sortablejs实现的表格拖拽排序 前言 当使用 element el-table表格组件，需要完成拖拽排序时，可以使用一个强大的js拖拽库SortableJS 更详细的使用文档 sortable.js中文文档 该js拖拽库配置很简单，同样也很容易上手，官网提供了很多拖拽demo 一、安装 安装方式分为三种 1、...
如何实现element-plus的transfer组件拖动排序？
yyXieDaiMa的博客
07-02 1501
自定义指令实现element-plus的transfer组件拖动排序
element(-ui 和 -plus)的table实现拖拽排序
AzeShinja的博客
06-20 1303
对element表格组件进行拖拽排序
Vue3+element plus实现table拖拽排序(基于Sortablejs)
weixin_43962877的博客
05-10 1657
【代码】Vue3+element plus实现table拖拽排序(基于Sortable.js)
Vue3+element plus实现table拖拽排序(基于Sortable.js)
m0_67372185的博客
03-21 2105
Vue3+element plus实现table拖拽排序(基于Sortable.js)
Vue3 实现elementPlus的table列宽调整和拖拽
candy0521的博客
03-05 2010
【代码】Vue3 实现elementPlus的table列宽调整和拖拽。
element Puls Table实现拖拽排序
weixin_46806380的博客
12-10 497
通过设置row-key和sortable实现拖拽排序。
el-table 实现行拖拽排序
yueye_wu的博客
12-20 2329
el-table 实现行拖拽排序
el-table树形数据
03-31
<think>好的，我现在需要帮助用户解决在Element UI的el-table中实现树形数据展示的问题。首先，我得回忆一下Element UI的文档和相关组件。我记得Element UI本身有一个el-table组件，支持树形结构，但可能需要特定的配置。 用户提到的是树形数据展示，所以首先需要确认Element UI的版本。因为较新的版本可能内置了树形表格的功能，而旧版本可能需要借助其他方法或者第三方插件。比如，Element UI 2.x之后可能支持tree-props配置，而之前的版本可能需要使用row-key和load属性来实现懒加载，或者结合展开行功能手动实现。 接下来，我需要查找相关的文档或示例。根据用户提供的引用，比如引用[3]提到了El-Table Draggable插件，但用户的问题是关于树形结构，可能需要不同的方法。引用[1]提到row-class-name，可能用于样式调整，但不确定是否直接相关。 根据我的知识，Element UI的el-table实现树形结构的关键在于指定row-key和tree-props，并且数据结构中需要有children字段。例如，设置tree-props为{children: &#39;children&#39;}，这样组件会自动识别嵌套的数据结构。同时，可能需要使用expand-row-keys来控制默认展开的行。 另外，用户可能需要示例代码来展示如何配置。比如，在模板中使用el-table，设置row-key和tree-props，然后绑定数据。数据中的每个节点需要有children属性，这样表格会递归渲染子节点。 还需要考虑是否需要展开和折叠的功能，通常el-table会默认在左侧显示一个箭头图标，用户可以点击展开或折叠子行。如果用户的数据结构不是标准的children字段，可能需要通过tree-props来指定子节点的字段名。 此外，如果用户的数据是懒加载的，可能需要使用load方法，在展开时动态加载子节点数据。但用户的问题可能更多是关于静态树形数据的展示，所以主要关注基本配置。 最后，需要检查可能的常见问题，比如数据格式是否正确，是否指定了row-key，以及样式是否正确应用。如果有错误，比如没有正确显示树形结构，可能需要检查这些配置项。 总结步骤： 1. 确认Element UI版本支持树形表格。 2. 在el-table上配置row-key和tree-props。 3. 准备包含children字段的数据结构。 4. 示例代码展示基本用法。 5. 扩展功能如默认展开行或自定义图标。 6. 常见问题解答，比如数据格式、懒加载等。</think>在Element UI的el-table中实现树形数据展示，主要通过`row-key`和`tree-props`配置实现。以下是具体方法及示例： --- ### 一、核心配置步骤 1. **指定`row-key`** 绑定唯一标识字段（如`id`），确保行数据独立性： ```html <el-table :data="tableData" row-key="id"></el-table> ``` 2. **配置`tree-props`** 声明树形结构的子节点字段名（默认`children`）： ```html <el-table :data="tableData" row-key="id" :tree-props="{ children: &#39;children&#39; }"></el-table> ``` 3. **数据结构要求** 数据需嵌套`children`字段： ```javascript tableData: [{ id: 1, name: &#39;Parent Node&#39;, children: [ { id: 2, name: &#39;Child Node&#39; } ] }] ``` --- ### 二、完整示例代码 ```html <template> <el-table :data="tableData" row-key="id" :tree-props="{ children: &#39;children&#39; }" border style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="value" label="Value"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: &#39;Root&#39;, value: &#39;Root Data&#39;, children: [ { id: 2, name: &#39;Child 1&#39;, value: &#39;Data 1&#39; }, { id: 3, name: &#39;Child 2&#39;, value: &#39;Data 2&#39;, children: [ { id: 4, name: &#39;Grandchild&#39;, value: &#39;Data 3&#39; } ] } ] } ] }; } }; </script> ``` --- ### 三、扩展功能 1. **默认展开行** 通过`default-expand-all`属性展开所有节点： ```html <el-table default-expand-all ...></el-table> ``` 2. **自定义展开图标** 使用插槽`expand-icon`修改图标： ```html <el-table> <template #expand-icon="{ expanded }"> <i :class="expanded ? &#39;el-icon-remove&#39; : &#39;el-icon-circle-plus&#39;"></i> </template> </el-table> ``` 3. **懒加载子节点** 结合`load`方法动态加载数据[^3]： ```javascript methods: { loadNode(row, resolve) { if (row.level === 0) return resolve(rootData); axios.get(`/api/children?id=${row.id}`).then(res => resolve(res.data)); } } ``` --- ### 四、常见问题 - **数据未渲染为树形？** 检查`children`字段命名是否与`tree-props`配置一致，并确保`row-key`唯一[^1]。 - **性能问题？** 深层嵌套数据建议使用懒加载，避免一次性渲染过多节点。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值