当前位置: 首页 > news >正文

使用elementUI实现表格行拖拽改变顺序,无需引入外部库

前言:

使用vue2+element UI,且完全使用原生的拖拽事件,无需引入外部库。

如果表格数据量较大,或需要更多复杂功能,可以考虑使用 vuedraggable库,提供更多配置选项和拖拽功能。

思路:

1. 通过el-table的row-class-name设置行的自定义class类名

2. 在 mountedupdated 生命周期钩子中调用this.$nextTick,确保 DOM 元素渲染完成后,使用 document.querySelectorAll 获取所有 .drag-row 元素。

3. 设置dom的 draggable为true,并增加拖拽事件处理函数:

  • ondragstart:记录拖拽开始的索引,并设置拖拽效果。
  • ondragover:在拖拽经过时,阻止默认行为,允许放置。
  • ondrop:在拖拽放下时,交换源位置和目标位置的数据,并更新列表。

在拖拽事件内 通过 修改数据的index的方式实现 行位置的移动

  • handleDragStart 方法

    • 记录当前拖拽行的索引 draggingIndex
    • 使用 event.dataTransfer.setData 方法存储拖拽数据,方便在 ondrop 中使用。
  • handleDrop 方法

    • 获取拖拽的源索引 sourceIndex 和目标索引 targetIndex
    • 通过数组的 splice 方法删除源位置的项目,并插入到目标位置。
    • 更新组件的数据 projects,触发 Vue 的响应式更新,表格会重新渲染显示新的排序。

效果演示:

完整代码:

<template><div class="sort-container"><span class="title">项目排序</span><!-- 通过 row-class-name 为每一行动态添加行的类名 --><el-table:data="projects"row-class-name="drag-row"@row-contextmenu.preventborder><el-table-column prop="index" label="序号" width="200"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="name" label="项目名称"></el-table-column></el-table></div>
</template><script>
export default {data() {return {projects: [{ id: '1', name: '男子10米气步枪' },{ id: '2', name: '女子50米步枪三姿' },{ id: '3', name: '男子双向飞碟' },{ id: '4', name: '女子25米手枪' },{ id: '5', name: '男子50米步枪卧射' },],draggingIndex: null,// 当前正在拖拽的行索引};},mounted() {// 组件挂载后添加拖拽事件this.addDragEvents();},updated() {// 数据更新后重新添加拖拽事件// 使用 this.$nextTick 获取表格行的 DOM 元素this.$nextTick(() => {this.addDragEvents();});},methods: {// 添加拖拽事件addDragEvents() {// 获取所有带有类名 'drag-row' 的表格行const rows = document.querySelectorAll('.drag-row');// 遍历每一行,添加拖拽事件rows.forEach((row, index) => {row.draggable = true; // 设置行元素为可拖拽// 开始拖拽时的事件处理row.ondragstart = (event) => this.handleDragStart(event, index);// 拖拽经过时的事件处理row.ondragover = (event) => this.handleDragOver(event);// 拖拽放下时的事件处理row.ondrop = (event) => this.handleDrop(event, index);});},// 处理拖拽开始事件handleDragStart(event, index) {this.draggingIndex = index; // 记录当前拖拽行的索引event.dataTransfer.effectAllowed = 'move'; // 设置拖拽效果为移动event.dataTransfer.setData('text/plain', index); // 将索引存储到拖拽数据中},// 处理拖拽经过事件handleDragOver(event) {event.preventDefault(); // 阻止默认事件,允许放置event.dataTransfer.dropEffect = 'move'; // 设置拖拽效果为移动},// 处理拖拽放下事件handleDrop(event, targetIndex) {const sourceIndex = this.draggingIndex; // 获取开始拖拽时记录的索引// 如果源索引和目标索引相同,直接返回if (sourceIndex === targetIndex) return;// 创建项目列表的副本const projects = [...this.projects];// 删除源位置的项目,并存储被拖拽的项目const [movedItem] = projects.splice(sourceIndex, 1);// 在目标位置插入被拖拽的项目projects.splice(targetIndex, 0, movedItem);// 更新项目列表数据this.projects = projects;this.draggingIndex = null; // 重置拖拽索引},},
};
</script><style lang='scss' scoped>
.sort-container{padding: 15px;.title{font-size: 24px;font-weight: bold;}.el-table{margin-top: 20px;}
}
/* 自定义拖拽行样式 */
.drag-row {cursor: move;user-select: none;
}
.drag-row:hover {background-color: #f0f9ff;
}
</style>

相关文章:

使用elementUI实现表格行拖拽改变顺序,无需引入外部库

前言&#xff1a; 使用vue2element UI&#xff0c;且完全使用原生的拖拽事件,无需引入外部库。 如果表格数据量较大&#xff0c;或需要更多复杂功能&#xff0c;可以考虑使用 vuedraggable库&#xff0c;提供更多配置选项和拖拽功能。 思路&#xff1a; 1. 通过el-table的ro…...

PySpark 数据处理实战:从基础操作到案例分析

Spark 的介绍与搭建&#xff1a;从理论到实践_spark环境搭建-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 Spark 程序开发与提交&#xff1a;本地与集群模式全解析-CSDN博客 Spark on YARN&#xff1a;Spark集群模式…...

恒源云使用手册记录:从服务器下载数据到本地

文章目录 一、xftp下载二、通过Xftp客户端连接站点 一、xftp下载 先下载xftp&#xff1a;下载连接 二、通过Xftp客户端连接站点 右击文件&#xff0c;点击新建 名称可以任意 主机、端口号、用户名 点击这里的复制登录命令 比如我这里得到ssh -p 41604 rooti-2.gpushare.co…...

【大咖云集 | IEEE计算智能学会广州分会支持】第四届信息技术与当代体育国际学术会议(TCS 2024,12月13-15日)

第四届信息技术与当代体育国际学术会议&#xff08;TCS 2024&#xff09; 2024 4th International Conference on Information Technology and Contemporary Sports 重要信息 会议官网&#xff1a;www.icitcs.net&#xff08;会议关键词&#xff1a;TCS 2024&#xff09; 202…...

【AI声音克隆整合包及教程】第二代GPT-SoVITS V2:技术、应用与伦理思考

一、引言 在当今科技迅速发展的时代&#xff0c;声音克隆技术成为人工智能领域的一个备受瞩目的分支。GPT-SoVITS V2作为一种声音克隆工具&#xff0c;正逐渐进入人们的视野&#xff0c;它在多个领域展现出巨大的潜力&#xff0c;同时也引发了一系列值得深入探讨的问题。本文旨…...

利用AI制作《职业生涯规划PPT》,10分钟完成

职业生涯规划是大学生活中非常重要的一环。通过制定职业规划&#xff0c;你能够明确未来的职业目标、认清自身的优劣势&#xff0c;进而制定切实可行的计划&#xff0c;以便顺利踏上职业发展的道路。而制作一份精美的职业生涯规划PPT&#xff0c;能有效帮助你在面试、职业规划报…...

【Java多线程】线程安全及解决方案(详解)

目录 线程安全问题引入&#xff1a; 线程安全原因 如何解决线程安全问题&#xff1f; &#xff08;1&#xff09;synchronized关键字 1)sychronized关键字的特性: 2)可重⼊ synchronized使⽤⽰例 &#xff08;2&#xff09;volatile关键字 1&#xff09;内存可见性和…...

【前端基础】Javascript取整函数以及向零取整方式

向零取整方式 在JavaScript中&#xff0c;有多种方式可以对数字进行取整操作&#xff0c;即去掉小数部分&#xff0c;只保留整数部分。其中&#xff0c;向0取整&#xff08;也称为截断小数部分&#xff09;的方式有以下几种常用的方法&#xff1a; 使用 Math.trunc()&#xff…...

禅道与Jira与Ones对比:哪个更适合你的项目管理需求?

一、项目管理工具的重要性 在当今复杂的项目环境中&#xff0c;选择合适的项目管理工具对项目成功至关重要。随着项目规模的不断扩大、涉及领域的日益广泛以及团队成员的分散性&#xff0c;传统的项目管理方式已经难以满足需求。 项目管理工具可以帮助团队更好地规划和组织项…...

Linux I/O编程:I/O多路复用与异步 I/O对比

文章目录 0. 引言1. I/O 模型简介1.1 阻塞 I/O&#xff08;Blocking I/O&#xff09;1.2 非阻塞 I/O&#xff08;Non-Blocking I/O&#xff09;1.3 信号驱动式 I/O&#xff08;Signal-Driven I/O&#xff09;1.4 多路复用 I/O&#xff08;I/O Multiplexing&#xff09;1.5 异步…...

Spark Plan 之 SQLMetric

SQLMetric Spark Plan 包含以下基本 方法&#xff0c; /*** return All metrics containing metrics of this SparkPlan.*/def metrics: Map[String, SQLMetric] Map.empty/*** return [[SQLMetric]] for the name.*/def longMetric(name: String): SQLMetric metrics(name)…...

基于YOLOv5模型的火焰识别系统

大家好&#xff0c;YOLOv5模型能够快速准确地检测到火灾火焰&#xff0c;在火灾初期甚至是刚刚出现火苗时就发出警报。这为及时采取灭火措施争取了宝贵的时间&#xff0c;极大地降低了火灾造成的损失。系统可以对特定区域进行持续实时监测&#xff0c;无论白天还是夜晚&#xf…...

多模态AI:开启人工智能的新纪元

在人工智能的璀璨星河中&#xff0c;多模态AI技术正逐渐成为一颗耀眼的明星。随着科技的飞速发展&#xff0c;AI技术正以前所未有的速度迈向新的高峰&#xff0c;其中多模态AI的兴起尤为引人注目。本文将深入探讨多模态AI的定义、技术原理、应用场景以及未来发展趋势。 ps.图…...

麒麟信安支撑2024年电力监控系统网络安全加固培训护航电力网络安全!

在网络安全形势日益复杂的今天&#xff0c;电力行业的网络安全尤为重要。为提升电力监控系统网络安全运维人员的专业技能&#xff0c;由国调中心网安处精心策划&#xff0c;国家电网技术学院组织开展的“2024年电力监控系统网络安全加固培训”于近日圆满结束。麒麟信安作为重要…...

横表和纵表 中的横表

图1 图2...

7个常用的JavaScript数组操作进阶用法

文章目录 1、查找数组中的最大值方法一&#xff1a;使用 Math.max 和展开运算符方法二:使用 for 循环逐一比较 2、查找数组中的第二大值方法一&#xff1a;排序后取第二大值方法二&#xff1a;遍历找到第二大值 3、去除数组中的重复项4、合并两个有序数组并保持有序5、旋转数组…...

Spark的Standalone集群环境安装

一.简介 与MR对比&#xff1a; 概念MRYARNSpark Standalone主节点ResourceManagerMaster从节点NodeManagerWorker计算进程MapTask&#xff0c;ReduceTaskExecutor 架构&#xff1a;普通分布式主从架构 主&#xff1a;Master&#xff1a;管理节点&#xff1a;管理从节点、接…...

Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin

Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin import android.graphics.Bitmap import android.os.Bundle import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.Glide import …...

shukla方差和相对平均偏差

参考资料&#xff1a;实用统计学【李奉令】 Eberhart-Russell模型、Shukla模型、相对平均偏差稳定性分析比较 相对平均偏差在品种稳定性分析中的作用 1、Shukla方差 生物统计中&#xff0c;用于描述一个群体离散程度的统计量有离差、方差、极差等&#xff0c; 国内品种区域试…...

双指针(二)双指针到底是怎么个事

一.有效的三角形个数 有效的三角形个数 class Solution {public int triangleNumber(int[] nums) {Arrays.sort(nums);int i0,end nums.length-1;int count 0;for( i end;i>2;i--){int left 0;int right i-1;while(left<right){if(nums[left]nums[right]>nums…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...