element(-ui 和 -plus)的table实现拖拽排序

news/2025/2/13 1:01:03/

首先我要介绍一个超级好用的工具,sortablejs

直接安装yarn add sortablejs, 后在自己的vue文件中引入就可以直接使用了
首先提供element plus 和 -ui的区别只在于 传入Sortable的el。
element-ui: ‘.el-table__body-wrapper tbody’
element-plus: ‘.el-table__body tbody’

rowDrop() {// tbody  拿到你要去操作的拖拽元素的父节点const tbody = document.querySelector('.el-table__body tbody',// .el-table__body-wrapper tbody);// eslint-disable-next-line @typescript-eslint/no-this-aliasconst that = this;new Sortable(tbody, {animation: 150, //定义排序动画的时间  单位是msghostClass: 'blue-background-class', //drop placeholder的css类名  可以不设置//开始拖拽onStart: function (e) {// ...开始拖拽逻辑},//结束拖拽onEnd: function (obj) {const list = JSON.parse(JSON.stringify(that.tableData),);const temp = list.splice(obj.oldIndex, 1)[0];list.splice(obj.newIndex, 0, temp);that.tableData = list;},});

感谢这个博文让我了解到了sortablejs这个工具
参考博文地址:https://blog.csdn.net/PaPablame/article/details/128126882
工具官网:http://www.sortablejs.com/


http://www.ppmy.cn/news/598298.html

相关文章

git多人合作

首先创建一个仓库,然后比如现在仓库当中已经有代码了,那么想要参与项目,假设我们现在有一个远程仓库,这个是多人合作笔记,我们共同合作的代码main(master) git clone 克隆下来 git checkout -b my-feature //复制一份…

c++获取硬盘or分区序列号

在使用 Windows 时&#xff0c;可以使用命令获取硬盘分区的(或多或少唯一的)序列号。 GetVolumeInformation() 示例代码&#xff1a; #include <iostream>#include <windows.h> #include <stdio.h>int main(int argc, char **argv) {DWORD VolumeSerialNu…

怎么关闭macbook右上角的时间日期显示?

MAC全部取消时间目前没有彻底解决的办法&#xff0c;但是研究了下可以设置只能去掉日期&#xff0c;星期&#xff0c;同时显示时钟表盘的方式。 最终效果图&#xff1a; 操作步骤&#xff1a; 1. 点击【系统偏好设置】 2.点击【程序坞与菜单栏】 3. 按下图设置。

MacBook设置中国时区时间

新拿的办公电脑&#xff0c;想设置时间来着&#xff0c;设置里找了一圈&#xff0c;愣是一个没找着&#xff0c;哪怕有亚洲的也好啊&#xff0c; 下拉列表清一色美国&#xff0c;无语&#x1f613; // 打开终端 输入以下命令 sudo systemsetup -settimezone Asia/Shanghai按下回…

MacOS通过Time Machine恢复,迁移到新MacBook Pro后聚焦搜索与访达最近使用不正常的最终解决方法

有一次老的MacBook Pro出了问题&#xff0c;格式化后重装了系统通过Time Machine恢复后发现有部分软件不正常&#xff0c;而且系统自带的聚焦搜索&#xff0c;访达最近使用也都不显示东西了&#xff0c;最近换了新款的MacBook Pro使用迁移助理后也出现了这个问题&#xff0c;各…

苹果延长13英寸MacBook Pro背光维修计划

苹果本周延长了其全球13英寸MacBook Pro显示屏背光服务计划&#xff0c;授权符合条件的笔记本电脑的保修期自原始购买日期起最长为五年&#xff0c;或自该程序开始日期起最长为三年&#xff08;以时间较长者为准&#xff09;。上一个截止日期是原始购买日期之后的四年。苹果公司…

【苹果电脑(Macbook/Macbook Pro)查看本机IP地址和DNS地址的具体步骤】

文章目录 具体步骤总结 具体步骤 1、首先是该苹果电脑必须联网&#xff0c;没有联网IP地址根本无从谈起。 2、在桌面左上角点击文件–访达–打开系统偏好设置&#xff0c;点击网络。 3、点击连接的网络&#xff0c;比如这边是Wi-Fi&#xff0c;右侧的Wi-Fi状态即可看到IP地址&…

曾在美国生产的苹果电脑,如今却败得一塌糊涂

乔布斯曾尝试在硅谷建立制造文化。然而正如一位前苹果工程师所说的那样&#xff1a;“这项业务发展得并不好。” 苹果比诺基亚更优秀的一点&#xff0c;在于其在电脑领域的布局。然而&#xff0c;近些年&#xff0c;其电脑的优势也逐渐丧失。人们甚至已经担心&#xff0c;苹果会…