【vue3 + element plus 】拖动排序实现(只能拖拽一次的问题、拖动后的位置不准确问题)

1.使用sortablejs插件

用于el-table列表拖动排序

import Sortable from 'sortablejs' // 拖拽插件
mounted() { this.rowDrop() },
swap(arr, from, to) {
// 在这方法中按需求修改排序规则即可if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) returnconst temp = arr[from]arr[from] = arr[to]arr[to] = tempreturn arr
},
rowDrop() {const that = thisconst tbody = document.querySelector('.el-table__body-wrapper tbody')Sortable.create(tbody, {animation: 100,delay: 100,handle: '.move',onEnd ({ newIndex, oldIndex }) {let tableData = that.tableDatathat.tableData = []tableData = that.swap(tableData, oldIndex, newIndex)that.tableData = tableData}})
},
<el-table row-key="id" :data="tableData" border style="width: 100%"><el-table-column prop="content" label="活动内容" align="center" /><el-table-column label="操作" align="center"><template v-slot="{ row }"><div><el-icon class="move"><Sort /></el-icon></div></template></el-table-column>
</el-table>

踩过的坑:
that.tableData = [] 因为重新渲染后,附加的拖拽事件丢失,所以需要置空来解决table只能拖拽一次的问题
row-key="id" 缺失会导致拖动后的位置不准确
class="move" 绑定触发拖动事件

2.使用sortablejs-vue3插件

npm库地址

用于普通标签、图标等拖动排序

import { Sortable } from 'sortablejs-vue3'const options = {ghostClass: 'ghost',dragClass: 'drag'
},
const itemKey = Math.random()const swap = (arr, from, to) = {// 在这方法中按需求修改排序规则即可if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) returnconst temp = arr[from]if (from > to) { for (let i = from; i >= to; i--) { arr[i] = arr[i-1] } }if (from < to) { for (let i = from; i <= to; i++) { arr[i] = arr[i+1] } }arr[to] = tempreturn arr
},
const tagChange = (e) = {this.itemKey = Math.random()this.list= this.swap(this.list, e.oldIndex, e.newIndex)
},
const removeUser = (index) = {this.list.splice(index, 1)
},
<Sortable:key="itemKey":list="list":options="options"item-key="key"tag="div"@end="tagChange"
><template #item="{ element, index }"><div class="item"><el-tag closable @close="removeUser(index)"><span>{{element.name}}</span></el-tag></div></template>
</Sortable>

代码仅供参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/29373.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1 catboot:房价预测

学到的知识&#xff1a; 面对传统特征层面如何进行深度挖掘&#xff0c;衍生有价值的特征&#xff0c;让模型更好的理解数据&#xff1b;如何处理文本特征&#xff1b;如何对类别特征进行处理&#xff1b;类别特征与连续特征如何组合更加的高效&#xff1b;如何使用catboost, …

联华集团:IT团队如何实现从成本中心提升至价值中心|OceanBase 《DB大咖说》(十)

OceanBase《DB大咖说》第 10 期&#xff0c;我们邀请到了联华集团的CTO楼杰&#xff0c;来分享他如何思考 IT 业务价值&#xff0c;以及联华华商数据库的升级实践。 楼杰从大学毕业后就进入了联华工作&#xff0c;并一直扎根在近 20 年的&#xff0c;从一名底层的技术员成长为…

[每日一练]利用左右指定键连接实现经理的下属员工数量

该题目来自于力扣&#xff1a; 1731. 每位经理的下属员工数量 - 力扣&#xff08;LeetCode&#xff09; 题目要求&#xff1a; 表&#xff1a;Employees----------------------- | Column Name | Type | ----------------------- | employee_id | int | | name …

【区块链】POS(Proof of Stake)权益证明算法深度解析

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 POS&#xff08;Proof of Stake&#xff09;权益证明算法深度解析引言1. POS基本…

Bash sleep随机时间

在 Bash 中&#xff0c;如果你想让 sleep 命令等待一个随机的时间&#xff0c;你可以使用 $RANDOM 变量来生成一个随机数&#xff0c;然后将其转换为秒数。但是&#xff0c;$RANDOM 生成的数字范围是从 0 到 32767&#xff0c;这可能对于你想要的等待时间来说太大了。 为了得到…

【代码随想录】【算法训练营】【第42天】 [1049]最后一块石头的重量II [494]目标和 [474]一和零

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 42&#xff0c;周二&#xff0c;坚持一下~ 题目详情 [1049] 最后一块石头的重量II 题目描述 1049 最后一块石头的重量II 解题思路 前提&#xff1a;最多只会剩下一块 石头&#xff0c;求此…

生命在于学习——Python人工智能原理(3.5)

三、深度学习 9、常见神经网络 常见的神经网络有卷积神经网络&#xff08;AlexNet、VGGNet&#xff09;、循环神经网络&#xff08;RNN&#xff09; 长短时记忆网络&#xff08;LSTM&#xff09;。 &#xff08;1&#xff09;AlexNet AlexNet于2012年由Hinton学生Alex提出&a…

SqlServer添加索引

1. 聚集索引&#xff08;Clustered Index&#xff09; 描述&#xff1a;表数据按照索引顺序实际存储。适用场景&#xff1a;数据经常需要排序或范围查询&#xff0c;比如按日期排序的查询。优点&#xff1a; 提高排序和范围查询性能。一个表只能有一个聚集索引&#xff0c;但可…

uniapp顶部导航栏实现自定义功能按钮+搜索框并监听响应事件

目录 第一步&#xff1a;先下载按钮需要展示的图标&#xff08;若不使用图标&#xff0c;直接使用文字可跳过这步&#xff09; 1、点击需要的图标&#xff0c;添加入库 2、点击旁边的购物车&#xff0c;在弹出的窗口中选择下载代码 3、解压下载的压缩包&#xff0c;将这几个…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《考虑绿证—碳交易的多能互补综合能源系统电—热—气协同低碳优化调度 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【Seata】分布式事务解决方案——理论

目录 回顾什么是事务数据库事务的四大特性&#xff1a;ACID 分布式事务解释面临挑战分布式事务产生场景1. 单体架构中多数据源场景2. 分布式架构场景 分布式事务解决方案jta AtomikosLCN模式问题 Alibaba的Seata解决分布式事务问题 使用MQ解决分布式事务问题问题1&#xff1a;…

Thymeleaf 全局变量

在Spring Boot中&#xff0c;我们可以使用ThymeleafViewResolver的addStaticVariable方法来添加全局变量&#xff0c;这些全局变量可以在所有的Thymeleaf模板中直接使用&#xff0c;而不需要在每个视图控制器中重复定义。 以下是一个简单的例子&#xff0c;展示如何在Spring B…

【Java】已解决Java中的com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决Java中的com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException异常 在Java中操作MySQL数据库时&#xff0c;我们经常会使用JDBC&#xff08;Java Database Connectivi…

wordpress商用付费主题与免费主题的区别

WordPress免费主题与WordPress付费主题&#xff0c;都可以用&#xff0c;但存在非常大的差别。从直观的感受&#xff0c;简单地说就是&#xff0c;WordPress免费主题能用&#xff0c;WordPress付费主题好用。如果涉及到其它的方面&#xff0c;WordPress商用付费主题与免费主题之…

js中!emailPattern.test(email) 的test是什么意思

test 是 JavaScript 正则表达式&#xff08;RegExp&#xff09;对象的方法之一&#xff0c;用于测试一个字符串是否与正则表达式匹配。正则表达式是一种用于匹配字符串的模式&#xff0c;通常用于验证输入数据、查找和替换文本等。 使用 test 方法 test 方法语法如下&#xf…

Microsoft Remote Desktop:随时随地,掌控你的桌面

Microsoft Remote Desktop是一款卓越的远程桌面连接工具&#xff0c;由微软公司精心打造&#xff0c;旨在为用户提供高效、安全且便捷的远程办公体验。 Microsoft Remote Desktop mac版获取 这款软件支持跨平台操作&#xff0c;无论是在Windows、macOS还是iOS等设备上&#xf…

Idea连接GitLab的过程以及创建在gitlab中创建用户和群组

上期讲述了如何部署GitLab以及修复bug&#xff0c;这期我们讲述&#xff0c;如何连接idea。 首先安装gitlab插件 下载安装idea上并重启 配置ssh免密登录 使用管理员打开命令行输入&#xff1a;ssh-keygen -t rsa -C xxxaaa.com 到用户目录下.ssh查看id_rsa.pub文件 打开复制…

华为OD刷题C卷 - 每日刷题36(剩余银饰的重量,最大坐标值、小明的幸运数)

1、&#xff08;剩余银饰的重量&#xff09;&#xff1a; 这段代码是解决“剩余银饰的重量”的问题。它提供了一个Java类Main&#xff0c;其中包含main方法和getResult方法&#xff0c;用于计算经过一系列熔化过程后剩余银饰的重量。 main方法首先读取银饰的个数n&#xff0c…

三分钟了解链动3+1模式

在电商领域的营销策略中&#xff0c;链动31模式以其独特的魅力和优势&#xff0c;吸引了众多商家的目光。下面&#xff0c;我们将对这一模式进行深度剖析&#xff0c;并探讨其相较于链动21模式的优势所在。 一、身份设置与奖励机制 链动31模式在身份设置上分为三种&#xff1…

漏洞挖掘 | 记一次某src拿下高危漏洞

一、获取web端管理员权限 0x01简单查看一下&#xff0c;发现存在登录以及证书查询操作指南等功能 因该站特征较为明显&#xff0c;所以对页面进行了强打码 0x02弱口令测试&#xff08;无成果&#xff09; 既然存在登录口&#xff0c;那么肯定要试试弱口令了&#xff0c;开干…