使用 Sortable.js 库 实现 Vue3 elementPlus 的 el-table 拖拽排序

文章目录

    • 实现效果
    • Sortable.js介绍
    • 下载依赖
    • 添加类名
    • 导入sortablejs
    • 初始化拖拽实例
    • 拖拽完成后的处理
    • 总结

在开发过程中,我们经常需要处理表格数据,并为用户提供便捷的排序方式。特别是在需要管理长列表、分类数据或动态内容时,拖拽排序功能显得尤为重要。它允许用户通过简单的拖动操作来自定义数据的显示顺序,这不仅提高了操作效率,也增强了用户的参与感。

结合 Vue 3Element Plus 框架,我们可以利用 Sortable.js 库轻松实现这一功能。本文将介绍如何在el-table组件中集成拖拽排序,使数据管理更加直观和高效。


实现效果

在这里插入图片描述


Sortable.js介绍

Sortable.js 是一款强大且轻量级的JavaScript库,专为实现元素的拖放排序功能而设计。它不依赖于 jQuery 或其他大型框架,能够独立工作,并且兼容包括 IE9 及以上版本在内的现代浏览器以及移动触摸设备。这使得Sortable.js成为跨平台Web开发项目的理想选择。

该库的特点包括:

  • 广泛兼容性:支持多种浏览器环境,包括旧版IE浏览器(从IE9开始),以及各种现代浏览器,确保了良好的跨浏览器体验。
  • 框架无关Sortable.js可以直接集成到MeteorAngularJSReactVueKnockout等多种前端框架中,无需担心框架限制。
  • 触摸友好:针对移动端优化,能够在触摸屏设备上提供流畅的拖拽体验。
  • 高度可定制:提供丰富的配置选项,如动画效果、拖拽预览样式(ghostClass)、分组排序(group)等功能,允许开发者根据需求调整行为和外观。
  • 易于集成:只需引入Sortable.js文件,然后通过简单的JavaScript代码即可启用拖放排序功能,适用于列表、表格等常见布局元素。
  • 模块化设计Sortable.js采用模块化结构,开发者可以根据实际需求选择导入核心库或是包含所有插件的完整版本,有助于控制最终打包文件的大小。

通过Sortable.js,开发者可以快速实现如列表项的拖动重排、不同容器间的元素转移等常见交互需求,大大提升了Web应用的交互性和用户体验。

下载依赖

npm i sortablejs @types/sortablejs

添加类名

首先给 el-table 加上类名:class="elTable"

<el-table class="elTable" :data="tableData">

导入sortablejs

//导入sortablejs
import Sortable from 'sortablejs';

初始化拖拽实例

const initSort = () => {const table = document.querySelector(".elTable .el-table__body-wrapper tbody");Sortable.create(table, {group: 'shared',animation: 150,ghostClass: 'sortable-ghost', //拖拽样式easing: 'cubic-bezier(1, 0, 0, 1)',onStart: (item: any) => {console.log(item);},// 结束拖动事件onEnd: (item: any) => {console.log(item);setNodeSort(item.oldIndex, item.newIndex)},})
}

拖拽完成后的处理

const setNodeSort = (oldIndex: any, newIndex: any) => {// 使用arr复制一份表格数组数据const arr = xxx;console.log(arr);const currentRow = arr.splice(oldIndex, 1)[0]arr.splice(newIndex, 0, currentRow )// 原数组置空xxx = [];nextTick(async () => {xxx = arr;// 数据处理// ...// 提交后后台数据进行排序// ...});
}

总结

在本文中,我们探讨了如何在 Vue 3Element Plusel-table 组件中集成 Sortable.js 库,以实现表格数据的拖拽排序功能。

通过使用Sortable.js,我们能够为用户提供一种直观的方式来排序数据,使得应用更加符合用户需求。

在未来的项目中,这种拖拽排序的实现方法可以为开发者节省时间,提高工作效率,同时也能提升最终产品的用户体验。希望本文能够帮助开发者更好地理解和实现这一功能,为日常开发提供支持。

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

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

相关文章

STM32 + CubeMX + 硬件SPI + W5500 +UDP

这篇文章记录一下STM32W5500UDP的调试过程&#xff0c;实现UDP数据的接收与发送。 目录 一、W5500模块介绍二、Stm32CubeMx配置三、Keil代码编写1、添加W5500驱动代码到工程&#xff08;添加方法不赘述&#xff0c;驱动代码可以在官网找&#xff09;2、在工程中增加代码&#…

2023年SCRM系统排名分析及市场趋势解读

内容概要 当前&#xff0c;SCRM&#xff08;社交客户关系管理&#xff09;系统在企业运营中的重要性日益凸显&#xff0c;尤其是在快速发展的数字经济环境中。2023年的SCRM市场展现出多元化与专业化的趋势&#xff0c;不同企业在客户关系管理方面的需求各有不同&#xff0c;这…

StableDiffusion-3.5 文生图模型本地部署尝鲜

文章目录 官方仓库ComfyUI 配置模型文件生成图片&#xff0c;观察日志生成样例 买了新的 4070TiS 显卡之后&#xff0c;终于有了个人的 16GB 显存&#xff0c;再也不用在关键时刻和实验室的其他人抢那两张 3080Ti 12G 了&#xff0c;所以想试试看干净的 Linux 环境下&#xff0…

规范:项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交 命名规范及考证

一、规范命名的重要性 易懂、通用、规范、标准、专业性、是经验积累的体现 1.1、常见命名方法 序号命名方法解释1全小写2全大写3驼峰&#xff1a;小驼峰命名法4驼峰&#xff1a;大驼峰命名法5烤串命名法 / 脊柱命名法6下划线分隔法 二、项目名 采用小写字母和中划线&#…

Navicat 连接远程腾讯云服务器的MySQL数据库

首先需要开放开放腾讯云安全端口&#xff0c;可以参考这个链接腾讯云服务器入站规则端口开放使用指南(CentOS系统)。 但是注意需要开放的是IPv6&#xff0c;这个可以通过netstat命令查看确认。 然后查看当前用户信息 select user, host from mysql.user一般看到的都是 localh…

第三十四篇:URL和URI的区别,HTTP系列一

前面我们讲到通过TCP协议通信双方建立可靠连接&#xff0c;那么此时双方进行通信&#xff0c;需要用人能理解的形式进行信息组织&#xff0c;也就是为各种特定需求服务&#xff0c;满足日常生活中的各种场景。 比如&#xff1a;网页浏览、电子邮件、远程登录、文件传输、网络管…

什么情况下,不推荐建立索引?

一般有以下几种情况不推荐建立索引&#xff1a; 1&#xff09;对于数据量很小的表 当表的数据量很小&#xff08;如几百条记录&#xff09;时&#xff0c;建立索引并不会显著提高查询性能&#xff0c;反而可能增加管理的复杂性&#xff1b; 2&#xff09;频繁更新的表 对于…

GitHub上传自己的项目

目录 一、安装Git插件 1&#xff09;下载 2&#xff09;安装 二、创建Gothub的创库 三、通过Git上传本地文件到Github 四、其他 1、部分指令 2、如果已经运行过git init并设置了[user]&#xff0c;下次可以直接用 一、安装Git插件 1&#xff09;下载 下载地址&#x…

「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

本篇将带领你实现一个倒计时和提醒功能的应用&#xff0c;用户可以设置倒计时时间并开始计时。当倒计时结束时&#xff0c;应用会显示提醒。该项目涉及时间控制、状态管理和用户交互&#xff0c;是学习鸿蒙应用开发的绝佳实践项目。 关键词 UI互动应用倒计时器状态管理用户交互…

Linux动态库和静态库

1&#xff0c;手动制作静态库 1&#xff0c;如何形成静态库文件 做库时&#xff0c;头文件(.h)必须暴露&#xff0c;源文件(.c)必须隐藏。 操作&#xff1a;将需要形成库的文件编译成.o文件&#xff1a; 然后用指令&#xff1a;ar -rc libmy_stdio.a my_stdio.o my_string.o…

java基础之 String\StringBuffer\ StringBuilder

文章目录 String字符串的创建为什么说String是不可变的&#xff1f;创建后的字符串存储在哪里&#xff1f;字符串的拼接String类的常用方法 StringBuilder & StringBuffer使用方法验证StringBuffer和StringBuilder的线程安全问题 总结三者区别什么情况下用运算符进行字符串…

告别繁琐统计,一键掌握微信数据

微信数据管理的挑战在数字时代&#xff0c;微信已成为我们日常沟通和商业活动的重要工具。然而&#xff0c;随着微信号数量的增加&#xff0c;手动统计每个账号的数据变得越来越繁琐。从好友数量到会话记录&#xff0c;再到转账和红包&#xff0c;每一项都需要耗费大量的时间和…

bert-base-chinese模型使用教程

向量编码和向量相似度展示 import torch from transformers import BertTokenizer, BertModel import numpy as npmodel_name "C:/Users/Administrator.DESKTOP-TPJL4TC/.cache/modelscope/hub/tiansz/bert-base-chinese"sentences [春眠不觉晓, 大梦谁先觉, 浓睡…

HTML+CSS科技感时钟(附源码!!!)

预览效果 源码(直接复制使用) <!DOCTYPE html> <html lang"zh-Hans"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>科技感时钟</…

PyQt5实战——UTF-8编码器功能的实现(六)

个人博客&#xff1a;苏三有春的博客 系类往期文章&#xff1a; PyQt5实战——多脚本集合包&#xff0c;前言与环境配置&#xff08;一&#xff09; PyQt5实战——多脚本集合包&#xff0c;UI以及工程布局&#xff08;二&#xff09; PyQt5实战——多脚本集合包&#xff0c;程序…

‌MySQL中‌between and的基本用法‌

文章目录 一、between and语法二、使用示例2.1、between and数值查询2.2、between and时间范围查询2.3、not between and示例 BETWEEN AND操作符可以用于数值、日期等类型的字段&#xff0c;包括边界值。 一、between and语法 MySQL中的BETWEEN AND操作符用于在两个值之间选择…

微服务系列一:基础拆分实践

目录 前言 一、认识微服务 1.1 单体架构 VS 微服务架构 1.2 微服务的集大成者&#xff1a;SpringCloud 1.3 微服务拆分原则 1.4 微服务拆分方式 二、微服务拆分入门步骤 &#xff1a;以拆分商品模块为例 三、服务注册订阅与远程调用&#xff1a;以拆分购物车为例 3.1 …

jvm学习笔记-轻量级锁内存模型

一&#xff0c;轻量级锁 LockRecord的那个第一个成员变量是拷贝对应锁定了的java对象资源的MarkWord&#xff0c;Lock Record有一个Ptr指针刚开始指向自己&#xff0c;后面这个指针存储在锁定资源的java对象的markword中&#xff0c;后续可以通过java对象的MarkWord快速定位到…

【力扣专题栏】面试题 01.02. 判定是否互为字符重排,如何利用数组模拟哈希表解决两字符串互排问题?

题解目录 1、题目描述解释2、算法原理解析3、代码编写(1)、两个数组分别模拟哈希表解决(2)、利用一个数组模拟哈希表解决问题 1、题目描述解释 2、算法原理解析 3、代码编写 (1)、两个数组分别模拟哈希表解决 class Solution { public:bool CheckPermutation(string s1, stri…

指针和内存地址的关系(uint8_t和uint32_t的指针有什么区别)

指针在我们的学习中非常常见&#xff0c;有些人只是了解指针的基本概念&#xff0c;却不知道他的原理&#xff0c;到时候使用起来一头雾水&#xff0c;接下来我将对指针做出一些解释说明。 一、数据是如何存储的&#xff1a; 我们初始化一个int变量a,变量a会存储到内存中&#…