《ElementUI/Plus 基础知识》el-table + sortablejs 实现 row 拖动改变顺序(Vue2/3适用)

最新推荐文章于 2025-06-30 17:26:38 发布
原创 最新推荐文章于 2025-06-30 17:26:38 发布 · 999 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #前端 #javascript

最低0.47元/天 解锁文章
Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
🏆 前端领域优质创作者
07-10 1万+
vue3，nuxt3，elementplus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3element
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拖拽排序实现，表格内容拖拽重新排序，树形表
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+Element-Plus+Vite el-table 拖拽排序实现，Vue3项目sortablejs的安装与使用
做笔记/记录遇到的前端bug
10-26 9955
Vue3项目中 el-table 实现拖拽排序，并实现边拖拽边滚动。 图文详解，Vue3项目中如何使用 sortablejs并完成utils封装
在 Vue3 + Element Plus 中实现 el-table 拖拽排序功能
最新发布
weixin_61662162的博客
06-30 1725
结合SortableJS✅ 操作流畅✅ 实时更新数据✅ 可组合其他逻辑（如保存顺序、回显等）后续可将其封装为通用组件，支持传入字段、控制排序、导出顺序等功能。
《ElementUI/Plus 踩坑》el-table + sortablejs 拖拽顺序错乱(Vue2/3适用)
前端技术
09-19 1078
《ElementUI/Plus 踩坑》el-table + sortablejs 拖拽顺序错乱(Vue2/3适用)
vue2/3 - 基于element(ui/plus)实现el-table表格每行可拖动换位置排序，表格列（表头）可拖动交换位置功能效果（table表格可拖曳排序的行和列，用鼠标动态拖拽排序表格行列）
热门推荐
高级前端工程师
03-26 1万+
vue2，element ui，vue3，element-plus，el-table，Table表格组件，vue+element表格table拖曳排序行和列，vue +element ,el-table实现行和列拖拽排序，table 行、列拖拽，vue3+element plus表格行列实现拖拽排序，可拖拽移动列和动态排序字段，表格拖拽排序，vue+element表格table让表头列拖动换位置，Table表格实现自定义表头展示+表头拖拽排序，表头c可以拖动交换位置，表头拖拽调整顺序，表格每行可以用鼠标拖着
vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽
weixin_42234899的博客
06-12 1398
el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽
element-ui el-table 拖拽排序
qq_52189813的博客
08-24 5757
当使用表格组件，需要完成拖拽排序时，可以使用一个强大的js拖拽库SortableJS更详细的使用文档sortable.js中文文档该js拖拽库配置很简单，同样也很容易上手，官网提供了很多拖拽demo。
Element Plus 表格拖拽排序方案
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
04-16 1723
​​优先选 el-table​​：若项目已稳定使用 Element Plus，且拖拽需求简单，通过 Sortable.js 实现更轻量。​​优先选 Vxe Table​​：若项目允许引入新组件库，或需要行列拖拽、树形拖拽等高级功能，Vxe 的开发效率更高。​​数据唯一性​​：确保row-key或useKey配置唯一标识​​样式优化​​：通过 CSS 调整拖拽占位符（如​​异步提交​​：拖拽完成后可调用接口更新后端数据。
element plus组件el-transfer拖拽排序功能实现
qq_40731891的博客
06-14 2349
element plus 组件el-transfer拖拽排序功能
vue3+element-plus实现table表格整列的拖拽
qq_41713136的博客
08-02 3175
element Puls Table实现拖拽排序
weixin_46806380的博客
12-10 575
通过设置row-key和sortable实现拖拽排序。
【vue3 + element plus 】拖动排序实现（只能拖拽一次的问题、拖动后的位置不准确问题）
weixin_44099060的博客
06-18 1035
因为重新渲染后，附加的拖拽事件丢失，所以需要置空来解决table只能拖拽一次的问题。缺失会导致拖动后的位置不准确。
使用 Sortable.js 库 实现 Vue3 elementPlus 的 el-table 拖拽排序
Allen-
11-01 1616
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
vue3 elementPlus实现表格行列拖拽修改顺序
Lsir1998的博客
12-05 2142
vue3 使用sortablejs 实现elementplus 表格组件行列拖拽自定义顺序
如何实现element-plus的transfer组件拖动排序？
yyXieDaiMa的博客
07-02 1866
自定义指令实现element-plus的transfer组件拖动排序
vue3 + Element plus + Ts + Sortable.js 实现table拖拽排序
qq_37130872的博客
09-27 5317
使用yarn add types/sortablej 安装或者npm安装视情况而定（不要一会儿npm,一会儿yarn可能会报错，因为两个方法安装的文件路径不同）使用npm install sortable.js --save 或者 yarn add sortable.js。具体详细参数可以看官网。
element(-ui 和 -plus)的table实现拖拽排序
AzeShinja的博客
06-20 1497
对element表格组件进行拖拽排序
VUE +el-table+sortable.js实现拖拽表格table排序，实现行排序，列排序
03-11
<think>好的，用户的问题是关于在Vue中使用el-table和sortable.js实现表格的行和列拖拽排序。我需要先理清用户的具体需求，然后结合提供的引用内容来组织答案。 首先，用户提到了行和列拖拽排序，所以需要分别处理这两个部分。根据引用2和3，行拖拽已经有实现方法，但列拖拽可能需要额外处理。我需要确认sortable.js是否支持列拖拽，或者是否有其他方法。 接下来，分析引用中的信息。引用2和3都提到了使用sortable.js在el-table中实现行拖拽，但列拖拽没有直接提到。可能需要使用类似的思路，但针对表头进行操作。此外，引用1提到结合Vue 3和Element Plus，但用户可能使用的是Element UI，需要注意版本差异。 然后，我需要考虑具体的实现步骤。对于行拖拽，应该是在tbody绑定Sortable实例，处理行的拖拽事件，并更新数据。列拖拽则需要操作thead中的th元素，同样使用Sortable，但需要处理列的重新排列和数据更新。 示例代码部分，需要提供行和列拖拽的代码。行拖拽的代码在引用2和3中有示例，可以借鉴。列拖拽可能需要创建一个新的Sortable实例，作用于表头元素，并在拖拽结束后更新列的顺序。 注意事项方面，需要注意Vue的响应式数据更新，避免直接操作DOM，而应该通过数据驱动视图。此外，在弹窗中使用时（如引用2提到的el-dialog），可能需要处理组件挂载的时机，确保DOM存在后再初始化Sortable。 另外，用户可能遇到的问题包括拖拽后数据未更新，或者样式问题。需要提醒在拖拽结束后同步数据，并处理可能的样式冲突，比如z-index或事件冒泡的问题。 最后，生成相关问题，需要围绕实现中的关键点，如性能优化、事件处理、兼容性等提出相关问题，帮助用户深入理解。 总结步骤： 1. 安装sortable.js 2. 行拖拽：绑定tbody，处理拖拽事件，更新数据数组 3. 列拖拽：绑定thead，处理拖拽事件，更新列配置数组 4. 提供示例代码，包括行和列的实现 5. 注意事项：数据同步、组件销毁、样式调整、弹窗中的初始化时机</think>### 分步解答：Vue中实现el-table行和列拖拽排序 --- #### **一、实现行拖拽排序** 1. **安装依赖** ```bash npm install sortablejs --save ``` 2. **绑定表格行元素** ```vue <template> <el-table :data="tableData" row-key="id" id="dragTable"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> </el-table> </template> <script> import Sortable from &#39;sortablejs&#39;; export default { data() { return { tableData: [ { id: 1, name: &#39;张三&#39;, age: 25 }, { id: 2, name: &#39;李四&#39;, age: 30 } ] }; }, mounted() { this.initRowSortable(); }, methods: { initRowSortable() { const tbody = document.querySelector(&#39;#dragTable tbody&#39;); Sortable.create(tbody, { animation: 150, onEnd: (evt) => { // 同步数据顺序 const data = [...this.tableData]; const [movedRow] = data.splice(evt.oldIndex, 1); data.splice(evt.newIndex, 0, movedRow); this.tableData = data; } }); } } }; </script> ``` --- #### **二、实现列拖拽排序** 1. **绑定表头元素** ```vue <template> <el-table :data="tableData" row-key="id" id="dragTable"> <el-table-column v-for="col in columns" :key="col.prop" :label="col.label" :prop="col.prop"></el-table-column> </el-table> </template> <script> export default { data() { return { columns: [ { label: &#39;姓名&#39;, prop: &#39;name&#39; }, { label: &#39;年龄&#39;, prop: &#39;age&#39; } ] }; }, mounted() { this.initColSortable(); }, methods: { initColSortable() { const thead = document.querySelector(&#39;#dragTable thead tr&#39;); Sortable.create(thead, { animation: 150, onEnd: (evt) => { // 同步列顺序 const cols = [...this.columns]; const [movedCol] = cols.splice(evt.oldIndex, 1); cols.splice(evt.newIndex, 0, movedCol); this.columns = cols; } }); } } }; </script> ``` --- #### **三、注意事项** 1. **数据同步** 拖拽操作需通过Vue数据驱动视图更新，避免直接操作DOM[^2]。 2. **组件销毁** 在组件销毁时手动清理Sortable实例： ```javascript beforeUnmount() { if (this.rowSortable) this.rowSortable.destroy(); if (this.colSortable) this.colSortable.destroy(); } ``` 3. **弹窗中的使用** 若在`el-dialog`中使用，需在弹窗完全渲染后（如`mounted`或`open`事件）再初始化Sortable。 4. **样式调整** 拖拽时可能出现元素层级问题，可添加CSS： ```css .sortable-chosen { z-index: 9999 !important; } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值