Vue3中优雅地实现表格拖动排序功能

最新推荐文章于 2025-04-15 10:01:12 发布
最新推荐文章于 2025-04-15 10:01:12 发布
阅读量197 收藏 1
点赞数 1
分类专栏： Vue知识学习及项目开发实践 文章标签： Vue3 表格拖动排序功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bjzhang75/article/details/145428423
版权

文章目录

  • 1. 安装 sortablejs
  • 2. 初始化表格数据
  • 3. 使用 sortablejs
    • 3.1 导入 sortablejs
    • 3.2 使用 sortablejs 创建拖动表格方法
    • 3.3 在周期函数中调用方法
    • 3.4 销毁实例
  • 4. 完整代码

在这里插入图片描述
在 Vue.js 中主要通过第三方库实现表格拖动排序功能，其中最常用的库是 SortableJS。

1. 安装 sortablejs

npm i sortablejs --save

2. 初始化表格数据

这里使用 ElementPlus 作为前端组件库

注意要给 el-table 绑定 row-key 属性，并设置 ref。

 <el-table
    ref
了解本专栏 订阅专栏 解锁全文 超级会员免费看
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+ts+sortable 实现表格 行和列的拖拽
Juihui822的博客
05-11 673
vue3 + ts + sortablejs 实现表格拖拽功能
用 Vue 3 实现一个拖拽排序表格组件（支持列/行重排、列宽调整）
最新发布
idree的博客
04-15 1396
用 Vue 3 实现一个拖拽排序表格组件（支持列/行重排、列宽调整）
vue3表格使用拖拽排序
wch19960518的博客
07-16 1516
【代码】vue3表格使用拖拽排序。
Vue3中的列表(表格)拖拽排序
Roy__Jason的博客
07-05 5857
【代码】Vue3中的列表(表格)拖拽排序。
vue3+ts表格拖拽
weixin_54722719的博客
12-05 761
vue表格拖拽
Vue3 + El-Plus 实现表格行拖拽功能
FitnessSnail的博客
12-19 4845
这里项目只需要一个地方用到，就没有封装成组件，直接在用到的.vue文件中写了。在使用的 .Vue 文件中导入。
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
在Vue.js的生态系统中，有许多第三方组件可以帮助开发者快速实现一些常见功能，比如实现表格内容的拖拽排序。 Vue-draggable是基于Sortable.js的一个Vue组件，Sortable.js是处理列表和可拖拽排序的JavaScript库。...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并...
vue.draggable实现表格拖拽排序效果
10-17
vue.draggable是一个封装了Sortable.js的Vue组件，它能够让我们在Vue项目中方便地实现拖拽功能。要实现表格的拖拽排序，你需要先通过npm安装这两个库： 1. 安装组件 使用npm安装vue.draggable和sortablejs，可以...
vue3使用表格、列表的拖拽排序
qq_46617584的博客
07-04 1311
【代码】vue3使用表格、列表的拖拽排序。
vue3+element-plus实现table表格整列的拖拽
qq_41713136的博客
08-02 2604
【vue3表格单元格拖拽】
qq_45673932的博客
07-31 266
表格单元格拖拽
vue3代码解读：列表拖拽排序
weixin_48420104的博客
02-10 1156
返回值类型返回的是被删除的单个元素。返回的是一个包含被删除元素的数组。使用场景如果你需要直接操作被删除的单个元素，使用。如果你需要处理多个被删除的元素，或者需要保留返回的数组形式，使用。
Vue3实现拖拽排序
Abao的博客
08-31 183
Vue3实现拖拽排序
Vue3 使用AntDisignVue，table表拖拽
Lingyv77的博客
02-07 2423
Vue3 使用AntDisignVue，table表拖拽
Vue项目中实现拖拽排序效果-原生支持和拖拽库-draggable-demo
JackieDYH的博客
09-14 4576
draggable属性是 HTML5 新增的可拖拽属性HTML 中，除了图像、链接和选择的文本默认可拖拽外，其他元素默认是不可拖拽的。如果想让其他元素变成可拖拽的，首先需要把draggable属性设置为。
vue3+ts表格拖拽实现
zengdaoqiang的博客
09-25 265
【代码】vue3+ts表格拖拽实现。
vue3中javascript 使用 sortable 实现 table 拖拽排序功能
10-12
在Vue3中，使用Sortable库来实现表格（table）的拖拽排序功能非常方便。Sortable是一个强大的JavaScript库，用于创建可交互的拖放排序功能。以下是使用Sortable的主要步骤： 1. 安装Sortable库： 首先需要安装`@Sortablejs/sortablejs`库，可以使用npm或yarn命令行工具： ```bash npm install @sortablejs/sortablejs ``` 2. 引入并配置Sortable： 在你的组件文件中，引入Sortable并设置其选项： ```javascript import { Sortable } from &#39;@sortablejs/react&#39;; import SortableJS from &#39;sortablejs&#39;; // ... export default { setup() { const items = [ // 这里是你表格数据的对象数组，每个对象都有一个用于排序的键 { id: 1, name: &#39;Item 1&#39; }, { id: 2, name: &#39;Item 2&#39; }, // ... ]; // 初始化Sortable实例，传入items和排序规则 const sortableItems = Sortable.create(items, { group: &#39;__item__&#39;, // 设置排序组名，防止跨元素拖动 animation: 150, // 动画时间 onEnd: ({ newIndex }) => { // 排序完成后更新数据状态 this.items = items.slice().sort((a, b) => a.id - b.id); } }); return { sortableItems, items }; } } ``` 3. 更新HTML模板： 在模板中，绑定Sortable到表格行上： ```html <table> <tbody> <tr v-for="(item, index) in sortableItems.items" :key="item.id"> <td>{{ item.name }}</td> <!-- 或其他列 --> <td @mousedown.prevent> <draggable-item :item="item" index="index"></draggable-item> </td> </tr> </tbody> </table> ``` 4. `draggable-item`组件： 这个组件负责拖拽行为，并传递给Sortable处理： ```html <template> <div class="draggable" :data-id="item.id"> {{ item.name }} <button @dragstart.prevent>Drag</button> </div> </template> <script> export default { props: [&#39;item&#39;, &#39;index&#39;] }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bjzhang75

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

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

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

打赏作者

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

抵扣说明：

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

余额充值