sortable vue 排序_Vue使用Sortable步骤详解

最新推荐文章于 2024-08-12 10:53:50 发布
最新推荐文章于 2024-08-12 10:53:50 发布
阅读量1.6k 收藏
点赞数
文章标签： sortable vue 排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39851887/article/details/111849252
版权
本文详细介绍了在Vue项目中使用Sortable.js实现列表拖拽排序的步骤和注意事项，包括如何处理Vue与Sortable冲突导致的排序问题，以及提供了解决方案：设置key属性、还原DOM操作或借助v-if重新渲染。
摘要由CSDN通过智能技术生成

这次给大家带来Vue使用Sortable步骤详解，Vue使用Sortable的注意事项有哪些，下面就是实战案例，一起来看一下。

之前开发一个后台管理系统，里面用到了Vue和Element-UI这个组件库，遇到一个挺有意思的问题，和大家分享一下。

场景是这样，在一个列表展示页上，我使用了Element-UI的表格组件，新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的Element-UI，不方便修改它的源码，所以比较可行的方法只能是直接操作DOM。

具体的做法是在mounted生命周期函数里，对this.$el进行真实DOM的操作，监听drag的一系列事件，在事件回调里移动DOM，并更新data。

HTML5 Drag事件还是挺多的，和Touch事件差不多，自己手工实现也可以，不过这里就偷了个懒，直接用了一个开源的Sortable库，直接传入this.$el，监听封装后的回调，并且根据Vue的开发模式，在移动DOM的回调里更新实际的Data数据，保持数据和DOM的一致性。

如果你以为到这就结束了，那就大错特错，偷过的懒迟早要还。。。本以为这个方案是很美好的，没想到刚想调试一下，就出现了诡异的现象：A和B拖拽交换位置之后，B和A又神奇得换回去了！这是怎么回事？似乎我们的操作没有什么问题，在真实DOM移动了之后，我们也移动了相应的data，数据数组的顺序和渲染出DOM的顺序应该是一致的。

问题出在哪里？我们回忆一下Vue的实现原理，

最低0.47元/天 解锁文章
weixin_39851887
关注
sortable vue_基于Sortable.js的Vue拖放组件
cuk5239的博客
07-27 7273
sortable vue Vue可拖动 (Vue.Draggable) Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array. Vue组件(Vue.js 2.0)或指令(Vue.js 1.0)允许拖放以及与视图模型数...
antd table排序 vue_VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序...
weixin_39915171的博客
12-19 535
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)项目需求是要求能对element中 的table进行拖拽行排序这里用到了sorttableSortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)安装步骤：npminstallsortablejs--save在.vue中的js部分(需要用到sorttable的vue文件中)...
vue使用sortablejs进行表格和div的拖拽
Lucky铂爵
08-12 548
【代码】vue使用sortablejs进行表格和div的拖拽。
Vue之sortable实现排序功能
热门推荐
Silence-wen
01-09 3万+
前台代码 <template> <el-table @selection-change="handleSelectionChange" @sort-change="sortChange" v-loading="loading" id = "TableColumnID" element-lo
用vue和sortableJS轻松实现表格拖拽排序
希望看完文章的你能够带着答案离开
08-25 4015
用vue和sortableJS轻松实现表格拖拽排序
vue使用sortablejs实现排序
GuAng
07-12 1445
vue使用sortablejs实现排序
sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
weixin_42449422的博客
01-13 944
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：npm 下载：npm install sortablejs --save引入：import Sortable from "sortablejs";代码：拖 拽import Sortable from "sortablejs";export default {data() {return {tabl...
sortable vue 排序_VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序...
weixin_39864489的博客
12-22 653
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)项目需求是要求能对element中 的table进行拖拽行排序这里用到了sorttableSortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)安装步骤：npminstallsortablejs--save在.vue中的js部分(需要用到sorttable的vue文件中)...
Vue中使用Sortable的示例代码
08-27
在Vue中使用Sortable的示例代码，主要介绍了如何在Vue项目中使用Sortable库来实现拖拽排序的功能。Sortable库是一个开源的JavaScript库，提供了拖拽排序的功能，可以与Vue结合使用来实现复杂的拖拽排序功能。 ...
Sortable排序在vue使用/使用element弹框拖拽排序
waillyer的博客
09-17 2816
一、npm安装 npm install sortablejs --save 官网参考 http://www.sortablejs.com/index.html 二、导入项目 import Sortable from 'sortablejs'; 或者直接下载源码导入 // import Sortable from '@/plugins/Sortable.js'; var that = this; setTimeout(function () { var
vue+sortablejs进行列表排序
做一个有知识的流氓
12-18 944
【代码】vue+sortablejs进行列表排序。
sorttable.js 排序-方便实用的js排序，只需简单操作即可见到效果 Vue
12-13
sorttable.js 排序-方便实用的js排序，只需简单操作即可见到效果 var stIsIE = /*@cc_on!@*/false; sorttable = { init: function() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // kill the timer if (_timer) clearInterval(_timer); if (!document.createElement || !document.getElementsByTagName) return; sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/; forEach(document.getElementsByTagName('table'), function(table) { if (table.className.search(/\bsortable\b/) != -1) { sorttable.makeSortable(table); } }); },
vue +el + Sortable table列拖拽排序
05-19
vue table 列拖拽排序例子
Table动态排序-sorttable
04-26
NULL 博文链接：https://donald-draper.iteye.com/blog/2361740
探索 Vue-Sortable：一款强大的 Vue.js 可排序组件
gitblog_00021的博客
04-13 558
探索 Vue-Sortable：一款强大的 Vue.js 可排序组件 vue-sortable A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable 项目...
Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件
qq_44093294的博客
07-19 698
参考《Vue,js》实战（梁灏编著） sort-table：实战：使用Render函数开发可排序的表格组件 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可
vue拖拽插件 - Sortable
余白x的博客
09-15 502
vue拖拽插件 - Sortable import Sortable from "sortablejs";
在 Vue 2 中实现可拖拽排序指令：v-sortable
xiang_yang_QAQ的博客
05-14 1414
v-sortable首先，我们需要创建一个自定义指令v-sortable，它使元素可拖动并处理拖放事件。});});});});接下来，在你的 Vue 组件中使用这个自定义指令，并处理handleDrop方法以更新数据的位置。
vue-可排序的列表组件
qq_35176916的博客
12-13 3728
该组件的功能 可排序，并且添加数据后，可以根据原数据的排序状态立即进行排序，实现的原理就是给元素绑定一个属性记录下排序后的状态
vue3中javascript 使用 sortable 实现 table 拖拽排序功能
最新发布
10-12
在Vue3中，使用Sortable库来实现表格（table）的拖拽排序功能非常方便。Sortable是一个强大的JavaScript库，用于创建可交互的拖放排序功能。以下是使用Sortable的主要步骤： 1. 安装Sortable库： 首先需要安装`@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值