基于element UI 实现 table 列 拖拽

问题描述

在开发中遇到一个需求,即实现table列的拖拽,但是调研发现,大部分是基于sorttable.js这个包实现的,但是通过实际应用,发现sorttable.js用在操作element table 组件中并不是很舒服,总会莫名其妙的冒出一些异常bug,于是自行封装一个table 列拖拽组件。

难点概括

①element table header插槽应用

②drag知识点应用

③splice()方法理解

演示代码

<template><div><h1>基于element-ui table列拖拽实现</h1><drag-head :head-columns="tableHead" :data="tableData"></drag-head></div>
</template>
<script>
import DragHead from "./dragHead.vue";export default {name: "DragHeadCase",components: { DragHead },data() {return {tableHead: [{label: "零零",prop: "v0",width: 150,},{label: "一一",prop: "v1",width: 150,},{label: "二二",prop: "v2",width: 150,},{label: "三三",prop: "v3",width: 150,},{label: "四四",prop: "v4",width: 300,},{label: "五五",prop: "v5",},{label: "六六",prop: "v6",},{label: "七七",prop: "v7",},{label: "八八",prop: "v8",},{label: "九九",prop: "v9",},],tableData: [{v0: "2016-05-02",v1: "王小虎",v2: "上海",v3: "普陀区",v4: "上海市普陀区金沙江路 1518 弄",v5: 200333,v6: "2016-05-02",v7: "王小虎",v8: "上海",v9: "普陀区",},{v0: "2016-05-02",v1: "王小虎",v2: "上海",v3: "普陀区",v4: "上海市普陀区金沙江路 1518 弄",v5: 200333,v6: "2016-05-02",v7: "王小虎",v8: "上海",v9: "普陀区",},{v0: "2016-05-02",v1: "王小虎",v2: "上海",v3: "普陀区",v4: "上海市普陀区金沙江路 1518 弄",v5: 200333,v6: "2016-05-02",v7: "王小虎",v8: "上海",v9: "普陀区",},{v0: "2016-05-02",v1: "王小虎",v2: "上海",v3: "普陀区",v4: "上海市普陀区金沙江路 1518 弄",v5: 200333,v6: "2016-05-02",v7: "王小虎",v8: "上海",v9: "普陀区",},{v0: "2016-05-02",v1: "王小虎",v2: "上海",v3: "普陀区",v4: "上海市普陀区金沙江路 1518 弄",v5: 200333,v6: "2016-05-02",v7: "王小虎",v8: "上海",v9: "普陀区",},],};},
};
</script>

table 列 拖拽组件实现代码

<template><div style="width: 1000px"><el-tableref="elTable"borderstyle="width: 100%"v-bind="$attrs"v-on="$listeners":key="headKey":cell-class-name="cellClassName":header-cell-class-name="cellClassName"><!-- 循环表头 --><template v-for="(col, index) in tableHead"><el-table-column:key="index":prop="col.prop":align="col.align || 'center'":width="col.width || 100"><!-- 通过插槽为表头绑定mousedown和dragover方法 --><template slot="header" slot-scope="{ column, $index }"><span@mousedown="handleMounseDown($event, column, $index)"@dragover="handleDragover($event, column, $index)">{{ col.label }}</span></template></el-table-column></template></el-table></div>
</template><script>
export default {props: {headColumns: Array,},mounted() {/** 备用操作(如果需要对headColumns数组操作) */this.tableHead = this.headColumns;},data() {return {tableHead: [],// 拖拽状态dragState: {start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变,最好小于-3end: -3, // 移动鼠标时所覆盖的元素 indexdragging: false, // 是否正在拖动direction: undefined, // 拖动方向},headKey: "dragHead", // 表头数组变换位置时,重绘table(不更新该值,表头数组变化时,页面不会改变)scrollX: 0, // 初始x轴scroll位置(用于定位X轴滚动条)};},methods: {/** 鼠标摁下触发 */handleMounseDown(e, column, $index) {this.dragState.dragging = true;this.dragState.start = parseInt($index - 0);// 添加鼠标抬起事件  消除鼠标摁下立刻松开问题document.addEventListener("mouseup", this.handleMouseUp);// 添加拖拽结束事件document.addEventListener("dragend", this.handleMouseUp);// 对选中的表头允许其拖拽const dragclass = ".el-table__header-wrapper ." + column.id;const dragDom = document.querySelectorAll(dragclass);dragDom.forEach((dom) => {// 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发dom.setAttribute("draggable", true);});},/** 鼠标在拖拽移动时触发 */handleDragover(e, column, $index) {if (this.dragState.dragging) {// 获取当前滚动条的位置const scrollDom = this.$refs.elTable.bodyWrapper;this.scrollX = scrollDom.scrollLeft;const index = parseInt($index - 0); // 记录起始列/** 实时更改鼠标处于表头的位置 */if (index - this.dragState.start !== 0) {this.dragState.direction =index - this.dragState.start < 0 ? "left" : "right"; // 判断拖动方向this.dragState.end = parseInt($index - 0);} else {this.dragState.end = this.dragState.start;this.dragState.direction = null;}}},/** 鼠标抬起或拖拽结束触发 */handleMouseUp() {// 更新拖拽后的表头this.headDraged(this.dragState);const { end } = this.dragState;// 初始化拖动状态this.dragState = {start: end, //记录最后拖动的位置end: -9,dragging: false,direction: undefined,};document.removeEventListener("mouseup", this.handleMouseUp);document.removeEventListener("dragend", this.handleMouseUp);setTimeout(() => {// 重置拖拽状态this.dragState.start = -9;}, 500);},// 更新拖拽后的表头headDraged({ start, end, direction }) {if (direction) {const originColumn = this.tableHead[start];// 有位置交换时,原先位置的元素删除,再在目标处插入this.tableHead.splice(start, 1);this.tableHead.splice(end, 0, originColumn);this.headKey = new Date().getTime() + ""; // 更新table key值this.$nextTick(() => {// 因为表头重绘后滚动条会移到最左端初始位置,因此如果是在中间部分拖拽,还需要把滚动条在定位到该位置this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX;});}},// 拖动虚线样式设置cellClassName({ columnIndex }) {const { start, end, direction } = this.dragState;const target = columnIndex - 0;if (target === start) {// 被移动的元素return "drag_start";} else if (target === end) {// 要移动的位置return `drag_end_${direction}`;}return "";},},
};
</script><style lang="scss" scoped>
::v-deep .el-table {.drag_start {opacity: 0.8;background-color: rgba(0, 0, 0, 0.938);color: #f3e8e8fd;transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);}.drag_end_left {border-left: 2px dotted rgba(0, 0, 0, 0.938);}.drag_end_right {border-right: 2px dotted rgba(0, 0, 0, 0.938);}
}
</style>

然后我在操作的时候碰到一个报错

[Violation ] Added non-passive event listener to ascroll- blocking 'mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. See https: com/feature/574554 3795965952

翻译:

[冲突]在ascroll中添加了非被动事件侦听器-阻塞“mousewheel”事件考虑将事件处理程序标记为“passive”,以使页面更具响应性。参见https:com/feature/574554 3795965952

解决办法:

npm i default-passive-events -S
main.js import 'default-passive-events'

最后

该组件目前仅支持最简单的拖拽效果,后续开发出兼容fixed、checkbox、expand 以及操作列的组件会及时更新文章,有兴趣的朋友可以点赞收藏。

参考文献

基于element UI 实现 table 列 拖拽_element table列拖拽_淡然自若_blog的博客-CSDN博客

Added non-passive event listener to ascroll- blocking ‘mousewheel‘event Consider marking event handl_绅士的可怖的博客-CSDN博客

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

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

相关文章

Vue3+Vite 初始化OpenLayer

Vue3Vite 初始化OpenLayer 安装依赖 yarn add ol初始化OpenLayer <template><div id"ol-map"></div> </template><script lang"ts" setup> import { onMounted } from vue import ol/ol.css import { Map, View } from o…

Linux下的Shell基础——正则表达式入门(四)

前言&#xff1a; 正则表达式使用单个字符串来描述、匹配一系列符合某个语法规则的字符串。在很多文本编辑器里&#xff0c;正则表达式通常被用来检索、替换那些符合某个模式的文本。 在Linux 中&#xff0c;grep&#xff0c;sed&#xff0c;awk 等文本处理工具都支持…

EL与JSTL

目录 EL EL语法 EL运算符 JSTL JSTL标签分类 JSP脚本&#xff1a;代码结构混乱、脚本与HTML 混合易出错、代码不易维护。 EL表达式&#xff1a;优化程序代码&#xff0c;增加程序可读性。 EL EL语法 EL表达式 ${ EL 表达式 } EL操作符 操作符“ . ” 获取对象的属性&a…

redis持久化机制 事务详解

目录 前言&#xff1a; 持久化机制 RDB&#xff08;Redis DataBase&#xff09; 手动触发 save bgsave 自动触发 RDB特点 AOF&#xff08;append only file&#xff09; 缓冲区刷新策略 重写机制 aof重写流程 混合持久化 事务 事务操作命令 WATCH WATCH实现原…

Neo4j之ORDER BY基础

ORDER BY 语句用于对查询结果进行排序。以下是一些常用的示例和解释&#xff1a; 按属性值排序&#xff1a; MATCH (p:Person) RETURN p.name, p.age ORDER BY p.age DESC这个示例返回所有人节点的姓名和年龄属性&#xff0c;并按年龄降序排序。 按多个属性排序&#xff1a;…

kafka复习:(17)seekToBeginning的用法

从分区的开始进行消费&#xff0c;因为kafka会定期清理历史数据&#xff0c;所以分区开始的位移不一定为0。seekToBeginning只是从目前保留的数据中最小的offset进行消费 package com.cisdi.dsp.modules.metaAnalysis.rest.kafka2023;import org.apache.kafka.clients.consume…

分布式计算框架:Spark、Dask、Ray

目录 什么是分布式计算 分布式计算哪家强&#xff1a;Spark、Dask、Ray 2 选择正确的框架 2.1 Spark 2.2 Dask 2.3 Ray 什么是分布式计算 分布式计算是一种计算方法&#xff0c;和集中式计算是相对的。 随着计算技术的发展&#xff0c;有些应用需要非常巨大的计算能力才…

亿赛通电子文档安全管理系统 RCE漏洞复现(QVD-2023-19262)

0x01 产品简介 亿赛通电子文档安全管理系统&#xff08;简称&#xff1a;CDG&#xff09;是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&…

VIT 和Swin Transformer

VIT&#xff1a;https://blog.csdn.net/qq_37541097/article/details/118242600 Swin Transform&#xff1a;https://blog.csdn.net/qq_37541097/article/details/121119988 一、VIT 模型由三个模块组成&#xff1a; Linear Projection of Flattened Patches(Embedding层) Tran…

C语言基础之——数组

前言&#xff1a;本篇文章&#xff0c;我们将对一维数组&#xff0c;和二维数组进行展开式的讲解&#xff0c;并进行实际应用。 目录 一.一维数组 1.一维数组的创建和初始化 &#xff08;1&#xff09;数组的创建 &#xff08;2&#xff09;数组的初始化 2.一维数组的使用…

二叉树中的最大路径和-递归

路径 被定义为一条从树中任意节点出发&#xff0c;沿父节点-子节点连接&#xff0c;达到任意节点的序列。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root…

【python】tkinter使用多进程打包成exe后multiprocessing无法关闭对应进程

这是由于multiprocessing模块在Windows操作系统下使用fork方法创建子进程时会导致打包成exe后无法正常运行的问题。 可以尝试使用freeze_support函数来解决这个问题。freeze_support函数是在Windows操作系统下用于支持multiprocessing模块的函数。 下面是一个示例代码&#x…

C# 案例题

1. // # hello world using System; namespace HelloWorldApplication {class HelloWorld{static void Main(string[] args) {/*my first C# program*/Console.WriteLine("HelloWorld C#");Console.ReadKey();}} } 2. // C# 计算矩形的面积 /*计…

AI智能语音机器人的基本业务流程

先画个图&#xff0c;了解下AI语音机器人的基本业务流程。 上图是一个AI语音机器人的业务流程&#xff0c;简单来说就是首先要配置话术&#xff0c;就是告诉机器人在遇到问题该怎么回答&#xff0c;这个不同公司不同行业的差别比较大&#xff0c;所以一般每个客户都会配置其个性…

华为OD机试 - 最佳植树距离 - 二分查找(Java 2023 B卷 100分)

目录 一、题目描述二、输入描述三、输出描述四、备注说明五、二分查找六、解题思路七、Java算法源码八、效果展示1、输入2、输出3、说明 一、题目描述 按照环保公司要求&#xff0c;小明需要在沙化严重的地区进行植树防沙工作&#xff0c;初步目标是种植一条直线的树带。 由于…

java ssl加密发送邮件

通过25端口发送邮件不安全&#xff0c;改为ssl加密方式发送邮件&#xff0c;比较常见的2中实现类发送邮件如下所示。 1、JavaMailSenderImpl 类 使用该实现类发送邮件&#xff0c;ssl加密使用端口号为465&#xff0c;借助Properties类设置ssl的各种配置。 SysUserEntity user…

微信小程序——van-field中的left-icon属性自定义

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

vue 简单实验 v-for 循环

1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"list-rendering"><ol><li v-for"todo in todos">{{ todo.text }}</li></ol> </div> &…

AUTOSAR规范与ECU软件开发(实践篇)6.2 ETAS RTA系列工具入门

目录 1、 RTA系列工具安装方法 (1) ETAS RTA-RTE的安装方法 (2) ETAS RTA-BSW的安装方法

软件架构阐述

软件架构主要从以下几个方面进行阐述: 1. 架构模式 常见的软件架构模式有: 1. MVC架构 MVC全称Model-View-Controller,是一种分离视图和业务逻辑的软件设计典范,通过解耦来提高灵活性和复用性。 2. SOA架构 面向服务的架构(SOA)通过服务接口进行松耦合的组件编排,可以灵活可扩…