el-table 实现行拖拽排序

news2024/12/23 7:05:36

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.coloradmin.cn/o/1326295.html

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

相关文章

R语言【cli】——cli_warn可以更便捷的在控制台输出警告信息

Package cli version 3.6.2 cli_warn(message, ..., .envir parent.frame()) 参数【message】&#xff1a;它是通过调用 cli_bullets() 进行格式化的。进一步地&#xff0c;还需要调用 inline-makeup&#xff08;内联标记&#xff09;。 参数【...】&#xff1a;传递给 rlan…

Ubuntu 常用命令之 unzip 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 unzip命令在Ubuntu系统中用于解压缩.zip文件。它可以解压缩一个或多个.zip文件&#xff0c;并将文件解压缩到当前目录或指定的目录。 unzip命令的一般格式 unzip [选项] zipfile [file...]其中&#xff0c;zipfile是要解压的.zi…

谷歌浏览器最新chrome94版本CORS跨域问题

提示Access to XMLHttpRequest at http://localhost:xxxx/api from origin http://xxx.xxx.com:xxxx has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local. 解决办法&#xff1a; 打开浏览…

python核心阶段(七)—— 包&模块以及虚拟环境

1.包&模块 概念解释 模块&#xff1a;为了使代码容易维护&#xff0c;可以将一组功能相关的代码写入一个单独的.py文件中&#xff0c;这个.py文件 就被称作一个模块 包&#xff1a; 包是指一个有层次的文件目录结构&#xff0c;它包含多个相关模块或子包&…

16 Vue3中使用v-model绑定多选框

概述 使用v-model绑定多选框也是一种比较常见的需求&#xff0c;比如一个用户可以绑定多个角色&#xff0c;可以有多个兴趣爱好。 在本节课中&#xff0c;我们来学习一下这两种用法。 基本用法 我们创建src/components/Demo16.vue&#xff0c;在这个组件中&#xff0c;我们…

探索中文电码:起源、标准与实践

一、引言 中文电码是一种将中文文字转换为计算机可识别和处理的二进制编码。随着信息技术的发展&#xff0c;中文电码在各个领域得到了广泛的应用&#xff0c;如计算机编程、通信、文字处理等。本文将从起源、标准和发展三个方面深入探讨中文电码&#xff0c;以期帮助读者更好…

华为云Astro Zero零代码构建HDC展点打卡应用——实验指导

Astro轻应用&#xff08;即Astro Zero&#xff09;是华为云统一低代码平台Astro的子服务之一&#xff0c;让开发者通过简单的拖拽配置完成应用搭建。平台提供丰富的轻应用模板&#xff0c;包括办公管理、人事管理、项目管理、运营推广、培训赋能等领域&#xff0c;开发者可基于…

链接未来:深入理解链表数据结构(一.c语言实现无头单向非循环链表)

在上一篇文章中&#xff0c;我们探索了顺序表这一基础的数据结构&#xff0c;它提供了一种有序存储数据的方法&#xff0c;使得数据的访 问和操作变得更加高效。想要进一步了解&#xff0c;大家可以移步于上一篇文章&#xff1a;探索顺序表&#xff1a;数据结构中的秩序之美 今…

Spring Cloud Alibaba核心技术宝典,分布式系统中间件实战案例(百度云下载)

前言 《Spring Cloud Alibaba学习笔记》其实是阿里的微服务解决方案&#xff0c;是阿里巴巴结合自身微服务实践,开源的微服务全家桶&#xff0c;在Spring Cloud项目中孵化成为Spring Cloud的子项目。第一代的Spring Cloud标准中很多组件已经停更,如&#xff1a;Eureak,zuul等。…

系列十二(面试)、Java中的GC回收类型有哪些?

一、Java中的GC回收类型 1.1、概述 Java中的GC回收类型主要包含以下几种&#xff0c;即&#xff1a;UseSerialGC、UseParallelGC、UseConcMarkSweepGC、UseParNewGC、UseParallelOldGC、UseG1GC。 1.2、源码

VMware Ubuntu虚拟机忘记密码

​​原文 https://blog.csdn.net/ezconn/article/details/89328024​​​​​​​ 前言&#xff1a; 在VMware运行Ubuntu虚拟机时&#xff0c;开机之后忘记密码怎么办&#xff1f; 环境&#xff1a;Ubuntu版本&#xff1a;ubuntu-16.04.6-server-amd64&#xff1b;VMware版本…

系列十一(面试)、如何查看JVM的参数?

一、查看JVM的参数 1.1、概述 上篇文章介绍了JVM的参数类型&#xff0c;通过jinfo可以查看JVM的默认参数&#xff0c;本章介绍另外一种查看JVM参数的方式。 1.2、 分类 JVM中提供了三种方式查看JVM的参数信息&#xff0c;这三种方式又分为两类&#xff0c;即&#xff1a;查看默…

互联网中的商品超卖问题及其解决方案:Java中Redis结合UUID的应用

前言 在设计商品下单和库存扣减&#xff0c;你一定遇到过这样的问题&#xff0c;库存扣减为0了&#xff0c;可是消费者还能下单&#xff0c;并将订单信息保存到了数据库里&#xff0c;针对商品超卖问题&#xff0c;作此篇以解决。 随着互联网商业的飞速发展&#xff0c;商品超…

Linux宝塔面板本地部署Discuz论坛发布到公网访问【无需公网IP】

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…

数据结构与算法之美学习笔记:38 | 分治算法:谈一谈大规模计算框架MapReduce中的分治思想

目录 前言如何理解分治算法&#xff1f;分治算法应用举例分析分治思想在海量数据处理中的应用解答开篇内容小结 前言 本节课程思维导图&#xff1a; MapReduce 是 Google 大数据处理的三驾马车之一&#xff0c;另外两个是 GFS&#xff08;hdfs&#xff09; 和 Bigtable(hbase)…

cisp和cissp区别,考证必学资料

CISP&#xff08;Certified Information Security Professional&#xff0c;认证信息安全专家&#xff09;和CISSP&#xff08;Certified Information Systems Security Professional&#xff0c;认证信息系统安全专业人员&#xff09;都是信息安全领域的重要认证&#xff0c;但…

Gradle中 Implementation 与API 声明依赖方式的对比

在Gradle中&#xff0c;implementation和api是声明依赖的两种方式&#xff0c;它们在如何暴露依赖关系方面有所不同&#xff1a; Implementation: 当一个模块使用implementation声明依赖时&#xff0c;该依赖仅对声明它的模块可见。这意味着该依赖对于该模块的消费者是隐藏的。…

第三方登录-pc支付宝扫码登录流程

最近有个奇葩的需求&#xff0c;用户要支持支付宝扫码登录。这个需求很少见&#xff0c;那就做一下&#xff0c;看起来有点难&#xff0c;其实很简单。 先看结果 流程梳理 核心代码 获取支付宝扫码页面的url // 获取支付宝扫码登录页面的urlasync function getZFBLoginUrl()…

MySQL概括与SQL分类

文章目录 一、计算机语言二、SQL语言三、数据库系统四、MySQL简介 一、计算机语言 二、SQL语言 三、数据库系统 四、MySQL简介

如何通过宝塔面板搭建一个MySQL数据库服务并实现无公网ip远程访问?

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…