Vue中el-table表格的拖拽排序

el-table实现拖拽

element-ui 表格没有拖拽排序的功能,只能使用sortable.js插件实现拖拽排序,当然也可以应用到其他的组件里面,用法类似,这里只说表格。

实现步骤:

1、安装sortable.js

npm install sortablejs --save

2、在需要的页面中引入

import Sortable from 'sortablejs'

3、实现表格拖动代码

mounted () {// 阻止默认行为document.body.ondrop = function (event) {event.preventDefault();event.stopPropagation();}// 调用 table拖拽排序this.rowDrop()
}
methods: {// 行拖拽rowDrop () {let tbody = document.querySelector('.el-table__body-wrapper tbody')let _this = thisSortable.create(tbody, {// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }group: {name: 'words',pull: true,put: true},animation: 150, // ms, number 单位:ms,定义排序动画的时间onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件console.log('onAdd.foo:', [evt.item, evt.from])},onUpdate: function (evt) { // 拖拽更新节点位置发生该事件console.log('onUpdate.foo:', [evt.item, evt.from])},onRemove: function (evt) { // 删除拖拽节点的时候促发该事件console.log('onRemove.foo:', [evt.item, evt.from])},onStart: function (evt) { // 开始拖拽出发该函数console.log('onStart.foo:', [evt.item, evt.from])},onSort: function (evt) { // 发生排序发生该事件console.log('onUpdate.foo:', [evt.item, evt.from])},// 一般的业务就用onEnd结束拖拽就够了onEnd ({ newIndex, oldIndex }) { // 结束拖拽if(newIndex == oldIndex) return;let currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow)}})}
}

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

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

相关文章

SourceTree 使用技巧

参考资料 SourceTree使用教程(一)—克隆、提交、推送SourceTree的软合并、混合合并、强合并区别SourceTree 合并分支上的多个提交,一次性合并分支的多次提交至另一分支,主分支前进时的合并冲突解决 目录 一. 基础设置1.1 用户信息…

VR司法法治教育平台,沉浸式课堂教学培养刑侦思维和能力

VR司法法治教育平台提供了多种沉浸式体验,通过虚拟现实(Virtual Reality,简称VR)技术让用户深度参与和体验法治知识。以下是一些常见的沉浸式体验: 1.罪案重现 VR司法法治教育平台可以通过重现真实案例的方式,让用户亲眼目睹罪案发…

一文了解气象站是什么,作用有哪些?

气象站被广泛应用于气象、农业、交通、能源、水利、环保等领域,是一种用于收集、分析和处理气象数据的设备,能够为人们提供及时、准确的气象数据和决策支持。 气象站一般由传感器、环境监控主机和监控平台组成。传感器能够测量各种气象要素,…

Spring 中存取 Bean 的相关注解

目录 一、五大类注解 1、五大类注解存储Bean对象 1.1Controller(控制器储存) 1.2Service(服务存储) 1.3Repository(仓库存储) 1.4Component(组件存储) 1.5Configuration(配置存储) 2、五大类注解小结 2.1为什么要这么多类注解 2.2 五大类注解之间的关系 二、方法注解 1.方法注…

SQL-子查询

SQL 子查询 是指将一个SELECT查询(子查询)的结果用括号括起来作为另一个SQL语句的数据来源或者判断条件

【Bug】Ubuntu 有线设置打不开无反应

前言: 突然有线设置就没法启用了,但是能联网,能查看ip 解决: 最后安装了一个新的依赖包: sudo apt install gnome-control-center 然后就可以了 还有一个方法,没试过,但感觉有点道理的&#…

在抖音中使用语聚AI,实现自动回复用户视频评论、私信问答

您可以通过集简云数据流程,将语聚AI助手集成到抖音视频评论、抖音私信,实现自动回复用户视频评论、私信问答,大大提升账号互动与运营效率。 效果如下: 自动化流程: ● 抖音普通号评论对接语聚AI(点击可一…

宏观经济和风电预测误差分析(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

pytorch异常——RuntimeError:Given groups=1, weight of size..., expected of...

文章目录 省流异常报错异常截图异常代码原因解释修正代码执行结果 省流 nn.Conv2d 需要的输入张量格式为 (batch_size, channels, height, width),但您的示例输入张量 x 是 (batch_size, height, width, channels)。因此,需要对输入张量进行转置。 注意…

Java的guava 限流写法

第一步先引入 maven <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>32.0.1-jre</version> </dependency> 然后上方法 private final double rateLimiter10 1.0 / 10.0; // 每…

多线程学习之多线程的案例

练习一&#xff1a;赠送礼物 需求&#xff1a;有100份礼品,两人同时发送&#xff0c;当剩下的礼品小于10份的时候则不再送出。利用多线程模拟该过程并将线程的名字和礼物的剩余数量打印出来. 示例&#xff1a; public class MyRunable implements Runnable {//第二种方式实现…

LLM学习笔记(1)

学习链接 ChatGPT Prompt Engineering for Developers - DeepLearning.AI 一、prompt engineering for developer 1、原则 prompting principles and iterative pattern 2、用于summarize 环境与helper functions import openai import osfrom dotenv import load_dotenv…

[C++] STL_list常用接口的模拟实现

文章目录 1、list的介绍与使用1.1 list的介绍1.2 list的使用 2、list迭代器3、list的构造4、list常用接口的实现4.1 list capacity4.2 插入删除、交换、清理4.2.1 insert任意位置插入4.2.2 push_front头插4.2.3 push_back尾插4.2.4 erase任意位置删除4.2.5 pop_front头删4.2.6 …

Redis之管道解读

目录 基本介绍 使用例子 管道对比 管道与原生批量命令对比 管道与事务对比 使用pipeline注意事项 基准测试 基本介绍 Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务器。 这意味着请求通常按如下步骤处理&#xff1a; 客户端发送一个请求到服务器&am…

国际版阿里云/腾讯云:阿里弹性云手机正式公测

阿里弹性云手机正式公测 什么是“云手机”&#xff1f;与我们传统的手机有何区别&#xff1f;它又有什么用处呢&#xff1f;当你接触到云手机概念的时候&#xff0c;是不是也会有这一连串的疑问。本文将为你揭开云手机的奥秘面纱。 2021年12月1日&#xff0c;阿里弹性云手机正…

HTTP返回状态值详解整理

一、总体 1xx:信息响应类&#xff0c;表示接收到请求并且继续处理 2xx:处理成功响应类&#xff0c;表示动作被成功接收、理解和接受 3xx:重定向响应类&#xff0c;为了完成指定的动作&#xff0c;必须接受进一步处理 4xx:客户端错误&#xff0c;客户请求包含语法错误或者是不能…

基于Sider-chatgpt3.5-编写一个使用springboot2.5连接elasticsearch7的demo程序,包括基本的功能,用模板方法

下面是一个使用Spring Boot 2.5连接Elasticsearch 7的示例程序&#xff0c;包括基本的功能&#xff0c;使用模板方法&#xff1a; 首先&#xff0c;确保你的项目中添加了以下依赖&#xff1a; <dependency> <groupId>org.springframework.boot</groupId> &l…

机器学习 | Python实现XGBoost极限梯度提升树模型答疑

机器学习 | Python实现XGBoost极限梯度提升树模型答疑 目录 机器学习 | Python实现XGBoost极限梯度提升树模型答疑问题系列问题回答问题系列 关于XGBoost有几个问题想请教一下。1.XGBoost的API有哪些种调用方法?2.参数如何调? 问题回答 XGBoost的API有2种调用方法,一种是我们…

java 八股文 基础 每天笔记随机刷

Component 和 PostConstruct 搭配使用 被Component注解标识的类在应用程序启动时会被实例化&#xff0c;并由Spring容器进行管理。PostConstruct是一个Java注解&#xff0c;用于标记一个方法在类被实例化后自动执行。该方法必须是非静态的&#xff0c;没有参数&#xff0c;且不…

数字货币量化交易平台

数字货币量化交易平台是近年来金融科技领域迅速崛起的一种创新型交易方式。它通过应用数学模型和算法策略&#xff0c;实现对数字货币市场的自动交易和风险控制。然而&#xff0c;要在这个竞争激烈的领域中脱颖而出&#xff0c;一个数字货币量化交易平台需要具备足够的专业性&a…