使用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>

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

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

相关文章

深入理解接口测试:实用指南与最佳实践5.0(三)

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

32位、64位、x86与x64:深入解析计算机架构

目录 一、32位架构(x86) 1.1 定义与历史 1.2 技术特点 1.3 优缺点 二、64位架构(x64) 2.1 定义与历史 2.2 技术特点 2.3 优缺点 三、x86与x64的关系 四、应用场景 4.1 32位架构的应用场景 4.2 64位架构的应用场景 五、总结 在计算机领域中,处理器架构的选择对…

【stable diffusion部署】超强AI绘画Stable Diffusion,本地部署使用教程,完全免费使用

前言 01 软件介绍 Stable Diffusion和Midjourney类似&#xff0c;都是当下AI绘画最流行的AI工具之一&#xff0c;都支持用文字生成AI图片或者图片生成图片的软件。 二者的区别是&#xff1a;Midjourney只能在网上使用&#xff0c;国内需要魔法才能使用&#xff0c;而且存在使…

【计算机网络】【网络层】【习题】

计算机网络-传输层-习题 文章目录 13. 图 4-69 给出了距离-向量协议工作过程&#xff0c;表&#xff08;a&#xff09;是路由表 R1 初始的路由表&#xff0c;表&#xff08;b&#xff09;是相邻路由器 R2 传送来的路由表。请写出 R1 更新后的路由表&#xff08;c&#xff09;。…

【嵌入式开发】单片机CAN配置详解

0 前言 CAN外设作为一种传输速率较高&#xff0c;且连线较为简洁的通信协议&#xff0c;如今很多单片机内部都集成了CAN控制模块&#xff0c;这样只需要再外接一个CAN收发芯片&#xff0c;将TTL/CMOS电平转换成CAN协议的差分电平&#xff0c;就是一个完整的CAN收发节点。   最…

虚拟机安装Ubuntu 24.04服务器版(命令行版)

这个是专门用于服务器使用的&#xff0c;没有GUI&#xff0c;常用软件安装&#xff0c;见 虚拟机安装Ubuntu 24.04及其常用软件(2024.7)_ubuntu24.04-CSDN博客https://blog.csdn.net/weixin_42173947/article/details/140335522这里只记录独特的安装步骤 1 下载Ubuntu 24.04安…

ctfshow-web入门-SSTI(web361-web368)上

目录 1、web361 2、web362 3、web363 4、web364 5、web365 6、web366 7、web367 8、web368 1、web361 测试一下存在 SSTI 注入 方法很多 &#xff08;1&#xff09;使用子类可以直接调用的函数来打 payload1&#xff1a; ?name{{.__class__.__base__.__subclasses__…

Axure网络短剧APP端原型图,竖屏微剧视频模版40页

作品概况 页面数量&#xff1a;共 40 页 使用软件&#xff1a;Axure RP 9 及以上&#xff0c;非软件无源码 适用领域&#xff1a;短剧、微短剧、竖屏视频 作品特色 本作品为网络短剧APP的Axure原型设计图&#xff0c;定位属于免费短剧软件&#xff0c;类似红果短剧、河马剧场…

如何从头开始构建神经网络?(附教程)

随着流行的深度学习框架的出现&#xff0c;如 TensorFlow、Keras、PyTorch 以及其他类似库&#xff0c;学习神经网络对于新手来说变得更加便捷。虽然这些框架可以让你在几分钟内解决最复杂的计算任务&#xff0c;但它们并不要求你理解背后所有需求的核心概念和直觉。如果你知道…

JS 实现SSE通讯和了解SSE通讯

SSE 介绍&#xff1a; Server-Sent Events&#xff08;SSE&#xff09;是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比&#xff0c;SSE提供了更高效和实时的数据推送机制。 SSE基于HTTP协议&#xff0c;允许服务器将数据以事件流&#xff08;…

HTML之表单学习记录

如果一个页面仅仅供用户浏览&#xff0c;那就是静态页面。如果这个页面还能实现与服务器进行数据交互&#xff08;像注册登录、话费充值、评论交流&#xff09;​&#xff0c;那就是动态页面。表单是我们接触动态页面的第一步。其中表单最重要的作用就是&#xff1a;在浏览器端…

WPF学习之路,控件的只读、是否可以、是否可见属性控制

C#的控件学习之控件属性操作 控件的只读、是否可以、是否可见&#xff0c;是三个重要的参数&#xff0c;在很多表单、列表中都有用到&#xff0c;正常表单控制可以在父层主键控制参数是否可以编辑和可见&#xff0c;但是遇到个别字段需要单独控制时&#xff0c;可以在初始化wi…

three.js 杂记

clip&#xff1a; 1&#xff1a; 着色器 #ifdef USE_CLIP_DISTANCE vec4 worldPosition modelMatrix * vec4( position, 1.0 ); gl_ClipDistance[ 0 ] worldPosition.x - sin( time ) * ( 0.5 ); #endif gl_Position projectionMatrix * modelViewMatrix * vec4( positio…

基于混合配准策略的多模态医学图像配准方法研究

摘要&#xff1a; 提出了一种由“粗”到“细”的混合配准策略&#xff0c;该配准策略吸取了以往配准方法的优点&#xff0c;且在细配阶段将基于特征的配准方法和基于灰度的配准方法结合在一起&#xff0c;提出了基于轮廓特征点集最大互信息的配准方法&#xff0c;从而在速度和精…

贪心算法入门(二)

相关文章 贪心算法入门&#xff08;一&#xff09;-CSDN博客 1.什么是贪心算法&#xff1f; 贪心算法是一种解决问题的策略&#xff0c;它将复杂的问题分解为若干个步骤&#xff0c;并在每一步都选择当前最优的解决方案&#xff0c;最终希望能得到全局最优解。这种策略的核心…

Autosar CP 基于CAN的时间同步规范导读

Autosar CP 基于CAN的时间同步规范主要用途 实现精确时间同步 提供了一种在CAN总线上准确分发时间信息的机制&#xff0c;确保连接到CAN网络的各个电子控制单元&#xff08;ECU&#xff09;能够共享精确的公共时间基准&#xff0c;对于需要精确时间协调的汽车系统功能&#xff…

前端常用布局模板39套,纯CSS实现布局

前端常用布局模板39套&#xff0c;纯CSS实现布局 说明 写博客、官网、管理后台都可以参考以下布局模板&#xff0c;实现模板布局的方式包含&#xff1a;flex、CSS、HTML5、Layout。 不需要下载积分&#xff0c;没有特殊库引用&#xff0c;不用安装任何插件&#xff0c;打开资源…

jmeter常用配置元件介绍总结之后置处理器

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之后置处理器 8.后置处理器8.1.CSS/JQuery提取器8.2.JSON JMESPath Extractor8.3.JSON提取器8.4.正则表达式提取器8.5.边界提取器8.5.Debug PostProcessor8.6.XPath2 Extractor8.7.XPath提取器8.8.结果状态处理器 8.后置处理…

边缘计算在智能交通系统中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 边缘计算在智能交通系统中的应用 边缘计算在智能交通系统中的应用 边缘计算在智能交通系统中的应用 引言 边缘计算概述 定义与原…

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

Vue 项目打包后环境变量丢失问题&#xff08;清除缓存&#xff09;&#xff0c;区分.env和.env.*文件 问题背景 今天在导报项目的时候遇到一个问题问题&#xff1a;在开发环境中一切正常&#xff0c;但在打包后的生产环境中&#xff0c;某些环境变量&#xff08;如 VUE_APP_B…