vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能，vue3 Table表格拖拽排序，表格每行使用鼠标拖动进行排序功能，表格拖拽排序实现（详细示例代码，一键复制开箱即用

已于 2025-03-29 16:46:38 修改
阅读量1w 收藏 6
点赞数 22
分类专栏： 前端组件与功能(开箱即用) vue常见问题解决 文章标签： elementPlus vue3 el-table Table表格拖动时动态排序 表格组件鼠标拖拽排序示例代码 树型tree复杂表格拖曳排序 element表格行可拖动排序
于 2024-03-23 15:39:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/136964246
版权
本文介绍在Vue3中使用Element Plus的el-table组件，结合sortablejs插件，实现表格行的鼠标拖动排序功能。提供详细步骤、源代码示例，包括插件安装、方法封装、全局样式以及在页面中应用，同时适用于树形复杂表格的排序需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

在vue3+elementPlus网站开发中，详细完成el-table表格的鼠标拖拽/拖曳/拖动排序，vue3使用element plus表格组件进行表格每行的拖动换位置排序功能（支持一键开启和关闭鼠标是否可拖动排序，代码易改造灵活），稍加改造可支持【树形复杂表格的排序】！

详细示例源代码，复制运行稍微改下就能用了。

在这里插入图片描述

准备开始

首先，

了解本专栏 订阅专栏 解锁全文
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 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
热门推荐
王二红
07-10 1万+
vue3，nuxt3，elementplus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3element
Element Plus 表格拖拽排序方案
最新发布
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
04-16 1184
​​优先选 el-table​​：若项目已稳定使用 Element Plus，且拖拽需求简单，通过 Sortable.js 实现更轻量。​​优先选 Vxe Table​​：若项目允许引入新组件库，或需要行列拖拽、树形拖拽等高级功能，Vxe 的开发效率更高。​​数据唯一性​​：确保row-key或useKey配置唯一标识​​样式优化​​：通过 CSS 调整拖拽占位符（如​​异步提交​​：拖拽完成后可调用接口更新后端数据。
Vue3 + element Plus + SortableJs，实现表格行拖拽排序（已踩什么都写了，就是拖动不了的坑）
lwc18639470699的博客
08-21 1273
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。el-table中只需要加一个( row-k="XX" )即可，row-key对应的必须是数组（tableData）中的唯一值。是你拖拽元素的父级标签，要从解析过的浏览器里看，不能单纯从我们写的代码结构看，因为我们用的el-table是封装的组件。
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
主要介绍了vue 中 elment-ui table合并上下两行相同数据单元格，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3+Element-Plus+Vite el-table 拖拽排序实现，Vue3项目sortablejs的安装与使用
做笔记/记录遇到的前端bug
10-26 9137
Vue3项目中 el-table 实现拖拽排序，并实现边拖拽边滚动。 图文详解，Vue3项目中如何使用 sortablejs并完成utils封装
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 776
在vue3中element ui-plus 表格拖拽排序，我使用的是sortablejs实现的表格拖拽排序 前言 当使用 element el-table表格组件，需要完成拖拽排序时，可以使用一个强大的js拖拽库SortableJS 更详细的使用文档 sortable.js中文文档 该js拖拽库配置很简单，同样也很容易上手，官网提供了很多拖拽demo 一、安装 安装方式分为三种 1、...
【vue3 + element plus 】拖动排序实现（只能拖拽一次的问题、拖动后的位置不准确问题）
weixin_44099060的博客
06-18 821
因为重新渲染后，附加的拖拽事件丢失，所以需要置空来解决table只能拖拽一次的问题。缺失会导致拖动后的位置不准确。
vue3+element-plus Sortable 实现table拖拽排序
qq_42600647的博客
06-15 1963
在setup()中编写行拖拽的实现方法，具体逻辑是创建一个Sortable的实例，将需要拖拽的元素给到Sortable实例，进行需要的配置，然后在拖拽结束的方法onEnd()中实现改变排序的逻辑(需要在dom后去调用，获取列表后.then里面也可以)。el-table中配置 给个row-key,且必须是唯一的，比如ID，否则会出现排序不对的情况。如果需要加拖拽图标配置handle添加了 .drag-handler。页面代码里面需要安装@element-plus/icons-vue。
vue3表格使用拖拽排序
wch19960518的博客
07-16 1519
【代码】vue3表格使用拖拽排序。
vue3+element-plus实现table表格整列的拖拽
qq_41713136的博客
08-02 2624
element-ui el-table 拖拽排序
qq_52189813的博客
08-24 5395
当使用表格组件，需要完成拖拽排序时，可以使用一个强大的js拖拽库SortableJS更详细的使用文档sortable.js中文文档该js拖拽库配置很简单，同样也很容易上手，官网提供了很多拖拽demo。
vue3 element-plus table表格多列排序,记录排序状态,重置时清空排序
weixin_44138241的博客
09-05 1101
vue3+element-plus 重置时清空多列排序状态。
el-table 实现行拖拽排序
yueye_wu的博客
12-20 2321
el-table 实现行拖拽排序
element(-ui 和 -plus)的table实现拖拽排序
AzeShinja的博客
06-20 1301
对element表格组件进行拖拽排序
Vue3 + El-Plus 实现表格行拖拽功能
FitnessSnail的博客
12-19 4875
这里项目只需要一个地方用到，就没有封装成组件，直接在用到的.vue文件中写了。在使用的 .Vue 文件中导入。
vue结合el-table实现表格行拖拽排序（基于sortablejs）
@必意玲
12-28 3327
/ 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致。// 略去数据，与前段代码一直。
elementplus ts 表格列拖动
01-15
### 如何在 Element Plus 中使用 TypeScript 实现表格列拖动功能 为了实现在 `Element Plus` 中使用 `TypeScript` 来创建具有可拖动列的表格，可以采用如下方法： #### 准备工作 确保项目已经安装并配置好 `Vue 3`, `TypeScript`, 和 `Element Plus`. 同时引入 `SortableJS` 库来处理拖放逻辑。 #### 创建组件结构 定义一个新的 Vue 组件用于展示带有可拖动特性的表格。此部分代码展示了如何设置基本模板以及脚本标签内的初始化操作[^1]。 ```vue <template> <el-table :data="tableData" style="width: 100%"> <!-- 定义表头 --> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"> </el-table-column> </el-table> </template> <script lang="ts" setup> import { ref, onMounted } from &#39;vue&#39; // 引入我们封装的 表单拖拽函数 import { enableColumnDrop } from &#39;@/utils/sortable&#39; const tableData = [ // 初始化数据... ] const columns = ref([ { prop: &#39;date&#39;, label: &#39;日期&#39; }, { prop: &#39;name&#39;, label: &#39;姓名&#39; }, ]) onMounted(() => { nextTick().then(() => { const elTableHeaderWrapper = document.querySelector(&#39;.el-table__header-wrapper tr&#39;) if (elTableHeaderWrapper) { enableColumnDrop(elTableHeaderWrapper, columns.value) } }) }) </script> ``` 上述代码片段中，在 `<script>` 部分通过 `setup()` 方法导入必要的依赖项，并调用了自定义工具包中的 `enableColumnDrop` 函数以激活列之间的拖曳行为。 #### 封装拖拽辅助函数 下面是一个简单的例子说明怎样编写这个帮助器函数 `enableColumnDrop`: ```typescript export function enableColumnDrop(element: HTMLElement, columnList: any[]) { new Sortable(element, { animation: 150, ghostClass: "sortable-ghost", chosenClass: "sortable-chosen", dragClass: "sortable-drag", onStart() {}, onEnd({ newIndex, oldIndex }) { if (newIndex !== undefined && oldIndex !== undefined) { const targetItem = columnList.splice(oldIndex, 1)[0]; columnList.splice(newIndex, 0, targetItem); } } }); } ``` 这段 JavaScript/TypeScript 脚本利用了 `Sortable.js` 提供的功能实现了当用户完成重新排列后更新视图模型的能力[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值