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.mzph.cn/news/236487.shtml

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

相关文章

【C++】new 和 delete

目录 一 引言 二 new 三 delete 四 new和delete操作自定义类型 五 operator new与operator delete函数 六 new和delete的实现原理 1 内置类型 2 自定义类型 1 new的原理 2 delete的原理 3 new T[N]的原理 4 delete[]的原理 七 定位new表达式(placement-new) 八 …

如何使用Docker搭建青龙面板并结合内网穿透工具发布至公网可访问

文章目录 一、前期准备本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用。本教程使用Docker部署青龙&#xff0c;如何安装Docker详见&#xff1a; 二、安装青龙面板三、映射本地部署的青龙面板至公网四、使用固定公网地址访问本地部署的青龙面板 正文…

期货高低板(期货价格飘升,市场掀起高低潮流)

什么是期货高低板&#xff1f; 期货是由交易所统一交易的标准化合约&#xff0c;商品的价格是通过供求关系来决定的。高低板则是期货交易中的常见现象&#xff0c;它表示了在交易过程中&#xff0c;价格波动超过了可设定的最高或最低价&#xff0c;于是交易系统便会出现高板或…

​Halcon机器视觉软件学习指南

引言 Halcon是由德国MVTec软件公司开发的一款领先的机器视觉软件&#xff0c;广泛应用于工业检测、图像分析、医疗图像处理等领域。对于大学生和初学者而言&#xff0c;学习Halcon不仅能够提升技术层面的能力&#xff0c;还能够增强未来的就业竞争力。本文将为您提供一个系统的…

Git 储藏(stash)用法

储藏的基本用法 保存当前的更改 1、查看储藏 git stash list2、更改保存到一个储藏中&#xff1a; git stash save "info"其中&#xff0c;“info” 是可选的注释信息&#xff0c;可以简要描述这个储藏的内容。 3、恢复之前保存的更改 可以使用下面的命令将之前…

安全狗云原生安全-云甲·云原生容器安全管理系统

随着云计算的快速发展&#xff0c;容器技术逐渐成为主流。然而&#xff0c;随着容器的普及&#xff0c;安全问题也日益突出。为了解决这一问题&#xff0c;安全狗推出了云原生容器安全管理系统——云甲。 云甲是安全狗云原生安全的重要组成部分&#xff0c;它采用了先进的云原生…

Jenkins 构建环境指南

目录 Delete workspace before build starts&#xff08;常用&#xff09; Use secret text(s) or file(s) &#xff08;常用&#xff09; Add timestamps to the Console Output &#xff08;常用&#xff09; Inspect build log for published build scans Terminate a …

什么是“人机协同”机器学习?

“人机协同”&#xff08;HITL&#xff09;是人工智能的一个分支&#xff0c;它同时利用人类智能和机器智能来创建机器学习模型。在传统的“人机协同”方法中&#xff0c;人们会参与一个良性循环&#xff0c;在其中训练、调整和测试特定算法。通常&#xff0c;它的工作方式如下…

vscode开发python环境配置

前言 vscode作为一款好用的轻量级代码编辑器&#xff0c;不仅支持代码调试&#xff0c;而且还有丰富的插件库&#xff0c;可以说是免费好用&#xff0c;对于初学者来说用来写写python是再合适不过了。下面就推荐几款个人觉得还不错的插件&#xff0c;希望可以帮助大家更好地写…

亚信安慧AntDB:支撑中国广电5G业务的数据库之力

自2019年6月获得5G牌照以来&#xff0c;中国广电积极利用700MHz频谱资源&#xff0c;迅速崛起为第四大运营商&#xff0c;标志着其在数字通信领域取得的巨大成就。通过与中国移动紧密合作&#xff0c;共建共享基站已超过400万座&#xff0c;为实现自主运营和差异化竞争提供了坚…

淘宝商品评论:商家了解市场趋势和竞争状况的窗口

淘宝商品评论是消费者对购买商品的反馈和评价&#xff0c;是商家了解市场趋势、消费者需求以及竞争状况的重要窗口。通过对商品评论的深入研究和分析&#xff0c;商家可以获取有价值的市场信息和用户需求&#xff0c;从而调整产品策略、优化营销方案以及制定更具针对性的市场竞…

飞书+ChatGPT搭建智能AI助手,无公网ip实现公网访问飞书聊天界面

飞书ChatGPT搭建智能AI助手&#xff0c;无公网ip实现公网访问飞书聊天界面 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 前言 …

光模块市场分析与发展趋势预测

光模块是光通信领域的重要组成部分&#xff0c;随着数字经济&#xff0c;大数据&#xff0c;云计算&#xff0c;人工智能等行业的兴起&#xff0c;光模块市场经历了快速发展&#xff0c;逐渐在数据中心、无线回传、电信传输等应用场景中得到广泛应用。本文将基于当前光模块全球…

Android Studio打包有哪些优势

大家好&#xff0c;现在移动应用程序的快速发展&#xff0c;开发者需要一个强大又可靠的开发环境来创建和打包高质量的 Android 应用程序。Android Studio 是一款由 Google 官方开发的 Android 应用程序开发环境&#xff0c;提供了许多的优势和便利&#xff0c;那究竟都有哪些优…

基于51的智能交通信号灯设计

文章目录 概要仿真图程序总结 资料下载地址&#xff1a;基于51的智能交通信号灯设计 概要 可实现东西、南北两个方向的红、黄、绿灯按设定的时间亮灭&#xff0c;用以指引交通通行&#xff0c;以倒计时方向显示时间。红、黄、绿交通灯的变化规律为&#xff1a; 1&#xff09…

ros2/ros 4轮2驱机器人xacro/urdf文件示例代码

这个实验中最重要的是&#xff1a;colcon build 之后要记得source install/setup.bash.否则修改的文件是不会更新的。知道了吧 <robot name"half" xmlns:xacro"http://wiki.ros.org/wiki/xacro"><xacro:property name"PI" value"3…

Django 简单图书管理系统

一、图书需求 1. 书籍book_index.html中有超链接&#xff1a;查看所有的书籍列表book_list.html页面 2. 书籍book_list.html中显示所有的书名&#xff0c;有超链接&#xff1a;查看本书籍详情book_detail.html(通过书籍ID)页面 3. 书籍book_detail.html中书的作者和出版社&…

2023年全球软件开发大会(QCon北京站2023)2月-核心PPT资料下载

一、峰会简介 本次活动聚焦云原生、分布式数据库、现代数据技术栈一系列前沿技术与实践&#xff0c;为技术团队负责人、架构师、开发人员等提供了技术学习与交流的平台。 本次峰会包含&#xff1a;AI基础架构、DevOps流程与实践、ML模型效率与易用性、测试环境治理、大规模集…

Nginx 安装(源码编译安装)

Nginx服务器提供了Windows和Linux版本&#xff0c;本文为Linux环境下Nginx服务器的详细安装步骤。 安装环境&#xff1a; Linux服务器操作系统&#xff1a;CentOs 8.1.1911 Nginx版本&#xff1a;1.21.4&#xff08;Linux&#xff09; 安装步骤&#xff1a; 1、安装GCC、aut…

单片机LCD1602

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