element ui表格手写拖动排序

效果图:
在这里插入图片描述

思路:

重点在于:拖动行到某一位置,拿到这一位置的标识,数据插入进这个位置 vueuse的拖拽hooks useDraggable 可以用;html5 drag能拖动行元素;mounsedown、mounsemove时间实现拖拽

页面html表格代码

<el-table:data="columnModelList"height="calc(100% - 40px)"stripeborderstyle="width: 100%"><!-- 通过自定义图标去拖动 --><el-table-columnheader-align="center"type="index"align="center"label="":width="60"><template #default="{ row, $index }"><span:class="filedInfoClass['drag-table-item'] + '-' + $index"@mousedown="dragHandle.dragStart(row, $index, filedInfoClass)"><img style="cursor: move;width: 30px;height: 30px;" th:src="@{/manager/assets/images/drag_icon.svg}"></span></template></el-table-column><el-table-columnprop="title"label="标题"show-overflow-tooltipmin-width="192"></el-table-column><el-table-columnprop="productType"label="产品类型"show-overflow-tooltipwidth="95"></el-table-column><el-table-columnprop="productName"width="243"show-overflow-tooltiplabel="产品名称"></el-table-column><el-table-columnprop="version"label="版本号"show-overflow-tooltipwidth="114"></el-table-column><el-table-columnprop="updateType"label="版本更新类型"show-overflow-tooltipwidth="140"><template slot-scope="scope">{{ showText(scope.row) }}</template></el-table-column><el-table-columnprop="introduction"show-overflow-tooltipwidth="263"label="简述"></el-table-column><el-table-columnprop="issueDate"show-overflow-tooltipwidth="206"label="发布时间"><template slot-scope="scope"><span>{{ scope.row.issueDate && ![0, 2, 3].includes(scope.row.status * 1) ? getIssueDate(scope.row.issueDate) : '/' }}</span></template></el-table-column><el-table-columnprop="status"show-overflow-tooltipwidth="100"label="状态"><template slot-scope="scope"><div style="text-align: center;height: 32px;line-height: 32px;"><span style="color: #262626;background: #EBEDF0;border: 1px solid rgba(102,102,102,0.06);" v-if="scope.row.status * 1 === 0" class="status-box">草稿</span><span style="color: #F47D06;background: #FEF4EB;border: 1px solid rgba(244,125,6,0.06);" v-else-if="scope.row.status * 1 === 2" class="status-box">待审核</span><span style="color: #E20000;background: #FEEBEB;border: 1px solid rgba(226,0,0,0.06);" v-else-if="scope.row.status * 1 === 3" class="status-box">退回</span><span style="color: #E20000;background: #FEEBEB;border: 1px solid rgba(226,0,0,0.06);" v-else-if="scope.row.status * 1 === 4" class="status-box">待发布</span><span style="color: #262626;background: #EBEDF0;border: 1px solid rgba(102,102,102,0.06);" v-else-if="scope.row.status * 1 === 1" class="status-box">已发布</span><span style="color: #E20000;background: #FEEBEB;border: 1px solid rgba(226,0,0,0.06);" v-else="scope.row.status * 1 === 5" class="status-box">已删除</span></div></template></el-table-column><el-table-columnfixed="right"label="操作"width="60"><template slot-scope="scope"><div class="table-button" @click="handleViews(scope.row)">查看</div></template></el-table-column></el-table>

在 template 模版中 定义mousedown方法,表示开始拖拽,并拿到记录拖拽元素标识信息
在这里插入图片描述

拖拽时采用原生js获取行维度数据,设置 effectAllowed = ‘move’ 表示每行都可以放置
拖动到每一行上时拿到行标识,并动态插入交换表格数据,vue通过 diff算法分析,dom变动实现拖动效果
放置时拿到拖动行id ,目标行 id 请求数据,动态刷新表格数据

在created里面定义拖动方法

const that = thisthat.dragHandle = {// 开始拖拽dragStart(row, i, filedInfoClass) {const dataSetDetail = []let dragI = i;  // 拖拽起点// 采用原生 js 获取 第 i 行const con = document.querySelector(`.el-table__body .row-class-${i}`)const tbody = document.querySelector(`.el-table__body tbody`)let tr = document.querySelectorAll(`.el-table__body tbody tr`);const dragKey = row.gid;  // 拖拽的元素标识if (con) {con.setAttribute('draggable', 'true');con.ondragstart = (ev) => {console.log('start', ev);}};// 设置 effectAllowed = 'move' 表示每行都可以放置tbody.ondragover = (ev) => {if (ev.dataTransfer) {ev.dataTransfer.effectAllowed = 'move';}ev.preventDefault();};tbody.ondragenter = (ev) => {if (ev.dataTransfer) {ev.dataTransfer.effectAllowed = 'move';}ev.preventDefault();};tr.forEach((el, n) => {el.ondragover = that.debounce(() => {// dataSetDetail.value?.columnModelList 表格数据const item = that.columnModelList[dragI]// n 移动到 第 n 个// i 从 第 i 个if (n > dragI) {that.columnModelList.splice(n + 1, 0, item);that.columnModelList.splice(dragI, 1);} else if (n < dragI) {const start = n - 1 < 0 ? 0 : n;that.columnModelList.splice(start, 0, item);that.columnModelList.splice(dragI + 1, 1);}dragI = n;},500,that);});tr = document.querySelectorAll(`.${filedInfoClass['field-info-container']} tbody tr`);tr.forEach((el) => {el.ondragend = () => {const columns = that.columnModelList || [];const beforeI =dragI + 1 >= columns.length ? -1 : dragI + 1;const columnId = columns[dragI].resourceId || '';const beforeColumnId = columns[beforeI]?.resourceId || null;};})}}

在data中定义样式对象

filedInfoClass: {'field-info-container': 'field-info-container','drag-table-item': 'row-class'},

columnModelList是定义在data中的表格数据

可以做到拖动一个就掉接口,我这里是拖动完,点保存才将数据传给后台。,掉接口

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

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

相关文章

JavaScript基础第六天

JavaScript 基础第六天 今天我们学习数组的遍历&#xff0c;以及数组的其他用法。 1. 数组遍历 1.1. 古老方法 可以使用 for 循环进行遍历。 let arr ["a", "b", "d", "g"]; for (let i 0; i < arr.length; i) {console.log…

火星文:网络时代下的语言

引言 在互联网时代&#xff0c;网络语言的发展日新月异。火星文作为一种特殊的网络表达方式&#xff0c;近年来逐渐兴起并成为了网络文化的一部分。 火星文生成器 | 一个覆盖广泛主题工具的高效在线平台(amd794.com) https://amd794.com/huoxingwen 火星文的兴起时代 火星…

了解物联网漏洞与家庭网络入侵之间的联系

我们的家庭正日益成为一个由互连设备组成的网络。从智能恒温器到联网冰箱&#xff0c;物联网 (IoT) 彻底改变了我们与家庭环境互动的方式。 随着技术进步带来了新的挑战&#xff1a;这些设备容易受到网络威胁以及随之而来的家庭网络入侵风险。 在这篇博文中&#xff0c;我们将…

JCIM | MD揭示PTP1B磷酸酶激活RtcB连接酶的机制

Background 内质网应激反应&#xff08;UPR&#xff09; 中的一个重要过程。UPR是由内质网中的三种跨膜传感器&#xff08;IRE1、PERK和ATF6&#xff09;控制的细胞应激反应&#xff0c;当内质网中的蛋白质折叠能力受到压力时&#xff0c;UPR通过减少蛋白质合成和增加未折叠或错…

基础图算法与社交网络分析

目录 前言1 寻找最短路径的Dijkstra算法1.1 介绍1.2 算法步骤1.3 应用领域1.4 算法优势与限制 2 构建高效网络结构的最小生成树算法2.1 Kruskal算法2.2 应用领域2.3 算法优势与限制 3 中心度算法3.1 PageRank算法3.2 Degree Centrality&#xff08;度中心度&#xff09;3.3 Bet…

项目02《游戏-12-开发》Unity3D

基于 项目02《游戏-11-开发》Unity3D &#xff0c; 任务&#xff1a;实现场景怪物自动巡航 &#xff0c; 首先在场景中创建小球命名为路径点WayPoint0&#xff0c; 取消小球的碰撞器Collider&#xff0c; 再复制两个改名为WayPoint1 和 WayPoint2 &#xff0c; 在…

Kubernetes基础(十五)-k8s网络通信

1 k8s网络类型 2 Pod网络 2.1 同一pod内不同容器通信 Pod是Kubernetes中最小的可部署单元&#xff0c;它是一个或多个紧密关联的容器的组合&#xff0c;这些容器共享同一个网络命名空间和存储卷&#xff0c;因此Pod中的所有容器都共享相同的网络命名空间和IP地址——PodIP&a…

LabVIEW网络测控系统

LabVIEW网络测控系统 介绍了基于LabVIEW的网络测控系统的开发与应用&#xff0c;通过网络技术实现了远程的数据采集、监控和控制。系统采用LabVIEW软件与网络通信技术相结合&#xff0c;提高了系统的灵活性和扩展性&#xff0c;适用于各种工业和科研领域的远程测控需求。 随着…

《动手学深度学习(PyTorch版)》笔记7.6

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

问题:金属电化学反应的实质是氧化还原反应,被腐蚀金属发生还原反应( ) #知识分享#知识分享#媒体

问题&#xff1a;金属电化学反应的实质是氧化还原反应&#xff0c;被腐蚀金属发生还原反应(  ) A、正确 B、错误 参考答案如图所示

LeetCode-第28题-找出字符串中第一个匹配项的下标

1.题目描述 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 2.样例描述 3.思路描述 可以让字符串 …

【Java 数据结构】Lambda表达式

Lambda表达式 1 背景1.1 Lambda表达式的语法1.2 函数式接口 2 Lambda表达式的基本使用2.1 语法精简 3 变量捕获3.1 匿名内部类3.2 匿名内部类的变量捕获3.3 Lambda的变量捕获 4 Lambda在集合当中的使用4.1 Collection接口4.2 List接口4.3 Map接口 5 总结 1 背景 Lambda表达式是…