el-table 实现行拖拽排序

element ui 表格实现拖拽排序的功能,可以借助第三方插件Sortablejs来实现。

引入sortablejs

npm install sortablejs --save
组件中使用
import Sortable from 'sortablejs';
 <el-table ref="el-table":data="listData" row-key="id" style="width: 100%"></el-table>

注意:el-table一定要设置row-key,且row-key绑定的值唯一,不然拖拽可能乱序

 mounted() {this.initSort()},initSort() {const el = this.$refs['el-table'].$el.querySelector('.el-table__body-wrapper > table > tbody')let _this = this;const ops = {animation: 200, //动画时长handle: ".el-table__row", //可拖拽区域class//拖拽中事件onMove: ({ dragged, related }) => {const oldRow = _this.listData[dragged.rowIndex] //旧位置数据const newRow = _this.listData[related.rowIndex] //被拖拽的新数据},//拖拽结束事件onEnd: evt => {const curRow = _this.listData.splice(evt.oldIndex, 1)[0]_this.listData.splice(evt.newIndex, 0, curRow)}}Sortable.create(el, ops)},

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

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

相关文章

牛客BC115 超级圣诞树

万众瞩目 在上一篇我们介绍了一个圣诞树的打印&#xff0c;而这道题与上次不同的是他的基本单位是一直在变的 我建议先把上一个搞懂在写这道题这个。 牛客网BC114 圣诞树-CSDN博客 ok那么正文开始 题目如下 今天是圣诞节&#xff0c;牛牛要打印一个漂亮的圣诞树送给想象中…

pg课堂笔记-新版本特性和版本升级

为什么要升级 版本特性:一年一个大版本,三个月一个小版本 9.4支持 jsonb ​ 9.6 支持并行 ​ 10 支持逻辑复制和声明分区 ​ 11 支持jit 、存储过程 ​ 14 引入 idle_session_timeout ​ 15 逻辑复制有大幅度提升 ​ 16 支持standby logical replication ,并行回放, 以及 …

单片机LCD1602

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、LCD1602是什么&#xff1f;二、LCD1602 原理三、显示一个字符四、如何显示四位数五、参考历程六、封装成一个显示 字符和一个显示任意四位数的函数总结 前言…

HTML输出特殊字符详细方法

以下是部分特殊字符代码表&#xff0c;它们的完整应用代码格式为&#xff1a;&#;用下面的四位数字替换&#xff0c;将得到对应的符号。&#xff08;注意&#xff1a;应用这些代码&#xff0c;编辑器应该切换到HTML模式&#xff09; ☏260f ☎260e ☺263a ☻263b ☼263c ☽…

Linux开发工具——vim篇

vim开发工具的使用 文章目录 vim开发工具的使用认识vimvim常用三种模式vim正常模式命令集模式切换移动光标删除文字赋值替换撤销上一次操作更改跳到指定的行 vim末行模式命令集列出行号跳到文件中的某一行&#xff1a;保存文件离开vim查找字符&#xff1a; 总结题外话&#xff…

@德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?

德人合科技 | 天锐绿盾加密软件是一款全面保障企业电脑数据和安全使用的加密软件 PC端访问地址&#xff1a;www.drhchina.com 它的功能包括但不限于&#xff1a; 实时操作日志&#xff1a;可以实时详细地记录所有终端的操作日志&#xff0c;包括终端上窗口标题的变换、程序的…

【C#】TimeSpan

文章目录 概述属性时间计算拓展来源 概述 TimeSpan结构&#xff1a;表示一个时间间隔。 它含有以下四个构造函数&#xff1a; TimeSpan(Int64)将 TimeSpan结构的新实例初始化为指定的刻度数。&#xff08;DateTime.Tick:是计算机的一个计时周期&#xff0c;单位是一百纳秒&…

通过https协议访问Tomcat部署并使用Shiro认证的应用跳转登到录页时协议变为http的问题

问题描述&#xff1a; 在最近的一个项目中&#xff0c;有一个存在较久&#xff0c;并且只在内部城域网可访问的一个使用Shiro框架进行安全管理的Java应用&#xff0c;该应用部署在Tomcat服务器上。起初&#xff0c;应用程序可以通过HTTP协议访问&#xff0c;一切运行都没…

微信小程序-选择和分割打开地图选择位置的信息

一、 前言 废话不多说&#xff0c;单刀直入。 本文要实现的功能是微信小程序中打开地图选择位置&#xff0c;以及将返回的位置信息分割。 例如返回的位置信息是&#xff1a;广东省深圳市龙岗区xxxxx小区 分割后变成&#xff1a; {province: "广东省",city: "深…

CComboBoxEx

很久以前写的一段代码感觉比较有意思记录下 一、前面是bmp的图像后面是文字 BOOL bRe Img.Create(IDB_BITMAP_Chamfer, 50, 8, RGB(255, 0, 0));mComBoxChamfer.SetImageList(&Img);COMBOBOXEXITEM cbexItem;cbexItem.mask CBEIF_IMAGE | CBEIF_SELECTEDIMAGE | CBEIF_O…

C语言-> 文件操作(函数满屏)

系列文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,数据结构,函数-CSDN博客 目的&#xff1a;学习文件操作&#xff0c;即…

【TI毫米波雷达】上电时序、串口回环BUG及SOP模式不正常工作的解决方案(LP87524电源PMIC芯片的BUCK供电时序配置)

【TI毫米波雷达】雷达上电时序及SOP模式不正常工作的解决方案&#xff08;LP87524电源PMIC芯片的BUCK供电时序配置&#xff09; 文章目录 上电时序上电以后的雷达串口回环问题延迟上电时序LP87524电源PMIC芯片的BUCK供电时序LP87524电源PMIC芯片的BUCK默认供电输出附录&#x…

Java中四种引用类型(强、软、弱、虚)

目录 引言 强引用&#xff08;Strong References&#xff09; 软引用&#xff08;Soft References&#xff09; 弱引用&#xff08;Weak References&#xff09; 虚引用&#xff08;Phantom References&#xff09; 引用类型的应用场景 总结 引言 Java中的引用类型是管理…

SpringCloud微服务 【实用篇】| Docker镜像、容器、数据卷操作

目录 一&#xff1a;Docker基本操作 1. 镜像操作 镜像相关命令 2. 容器操作 容器相关命令 3. 数据卷&#xff08;容器数据管理&#xff09; 数据卷 操作数据卷 挂载数据卷 挂载的方式区别 前些天突然发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0…

程序员的23大IONIO面试问题及答案

文章目录 1. 什么是IO流&#xff1f;2.java中有几种类型的流&#xff1f;3.字节流和字符流哪个好&#xff1f;怎么选择&#xff1f;4.读取数据量大的文件时&#xff0c;速度会很慢&#xff0c;如何选择流&#xff1f;5. IO模型有几种&#xff1f;6.阻塞IO &#xff08;blocking…

使用Python爬取GooglePlay并从复杂的自定义数据结构中实现解析

文章目录 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋友可以关注《爬虫JS逆向实战》&#xff0c;对分布…

天猫数据分析(天猫查数据工具):2023年天猫平台假发行业市场销售数据分析报告

如今&#xff0c;由于人们工作和生活的压力较大&#xff0c;居民脱发问题严重&#xff0c;且脱发群体倾向于80后和90后&#xff0c;逐渐向低龄化发展。除脱发外&#xff0c;在颜值经济的背景下&#xff0c;人们越来越注重外貌和形象&#xff0c;假发作为一种改善发型的工具&…

el-table设置默认选中报错_this.$refs.singleTable.toggleAllSelection is not a function

直接使用以下的方法&#xff0c;报错信息是_this.$refs.singleTable.toggleAllSelection is not a function this.$refs.singleTable.toggleAllSelection()看了网上的解决方法&#xff0c;加了this.$nextTick,代码如下&#xff0c;但还是报错Error in nextTick: "TypeErr…

文件夹数据同步工具 Sync Folders Pro mac支持选项

Sync Folders Pro for Mac 是一款功能强大的文件夹同步工具&#xff0c;旨在帮助用户在 Mac 计算机和移动设备之间创建双向同步。这款软件支持各种文件系统和设备&#xff0c;如 iPhone&#xff0c;iPad&#xff0c;iPod&#xff0c;Android 等。通过这款软件&#xff0c;用户可…

2023 英特尔On技术创新大会直播 | 边云协同加速 AI 解决方案商业化落地

目录 前言边云协同时代背景边缘人工智能边缘挑战英特尔边云协同的创新成果最后 前言 最近观看了英特尔On技术创新大会直播&#xff0c;学到了挺多知识&#xff0c;其中对英特尔高级首席 AI 工程张宇博士讲解的边云协同加速 AI 解决方案商业化落地特别感兴趣。张宇博士讲解了英…