el-table实现表格内部横向拖拽效果

2024.4.2今天我学习了如何对el-table表格组件实现内部横向拖拽的效果,效果:

代码如下:

一、创建utils/底下文件

const crosswise_drag_table = function (Vue){// 全局添加table左右拖动效果的指令Vue.directive('tableMove', {bind: function (el, binding, vnode) {let odiv = el // 获取当前表格元素// 修改样式小手标志// el.style.cursor = 'pointer'el.querySelector('.el-table .el-table__body-wrapper').style.cursor = 'pointer'let mouseDownAndUpTimer = nulllet mouseOffset = 0let mouseFlag = falselet bindRef = binding.value[0] //绑定的表格的ref属性odiv.onmousedown = (e) => {const ePath = composedPath(e)// 拖拽表头不滑动if (ePath.some(res => {return res && res.className && res.className.indexOf('el-table__header') > -1})) returnif (e.which !== 1) returnmouseOffset = e.clientXmouseDownAndUpTimer = setTimeout(function () {mouseFlag = true}, 80)}// odiv.onmouseup = (e) => {//   setTimeout(() => {//     // 解决拖动列宽行不对齐问题--渲染表格//     vnode.context.$refs[bindRef].doLayout()//   }, 200)//   if (mouseFlag) {//     mouseFlag = false//   } else {//     clearTimeout(mouseDownAndUpTimer) // 清除延迟时间//   }// }// odiv.onmouseleave = (e) => {//   setTimeout(() => {//     // 解决拖动列宽行不对齐问题--渲染表格//     vnode.context.$refs[bindRef].doLayout()//   }, 200)//   mouseFlag = false// }odiv.onmousemove = (e) => {if (e.which !== 1) returnconst divData = odiv.querySelector('.el-table .el-table__body-wrapper')if (mouseFlag && divData) {// 设置水平方向的元素的位置divData.scrollLeft -= (-mouseOffset + (mouseOffset = e.clientX))}}// 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;odiv.ondragstart = (e) => {e.preventDefault()}odiv.ondragend = (e) => {e.preventDefault()}// 是否拖拽可选中文字odiv.onselectstart = () => {return false}//浏览器Event.path属性不存在function composedPath(e) {// 存在则直接returnif (e.path) {return e.path}// 不存在则遍历target节点let target = e.targete.path = []while (target.parentNode !== null) {e.path.push(target)target = target.parentNode}// 最后补上document和windowe.path.push(document, window)return e.path}}})
}export default crosswise_drag_table

二、在main.js中引入

// 横向拖拽表格
import  crosswise_drag_table   from '@/utils/crosswiseDragTable'Vue.use(crosswise_drag_table   )

三、在vue文件中使用

<el-table ref='table_drag'v-table-move="['table_drag']"
></el-table>

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

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

相关文章

python用requests的post提交data数据以及json和字典的转换

环境&#xff1a;python3.8.10 python使用requests的post提交数据的时候&#xff0c;代码写法跟抓包的headers里面的Content-Type有关系。 &#xff08;一&#xff09;记录Content-Type: application/x-www-form-urlencoded的写法。 import requestsurlhttps://xxx.comheade…

Unity类银河恶魔城学习记录12-8 p130 Skill Tree UI源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI.cs using UnityEngine;public class UI : MonoBehaviour {[SerializeFi…

抖音电商小店短视频直播年度运营规划方案

【干货资料持续更新&#xff0c;以防走丢】 抖音电商小店短视频直播年度运营规划方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 年度运维方案的详细整理和规划。 一、行业分析洞察 - 市场增…

从零开始学​ChatGLM2-6B 模型基于 P-Tuning v2 的微调​

ChatGLM2-6B-PT 本项目实现了对于 ChatGLM2-6B 模型基于 P-Tuning v2 的微调。P-Tuning v2 将需要微调的参数量减少到原来的 0.1%&#xff0c;再通过模型量化、Gradient Checkpoint 等方法&#xff0c;最低只需要 7GB 显存即可运行。 下面以 ADGEN (广告生成) 数据集为例介绍…

【linux基础】bash脚本的学习:定义变量及引用变量、统计目标目录下所有文件行数、列数

假设目的&#xff1a;统计并输出指定文件夹下所有文件行数 单个文件可以用 wc -l &#xff1b;多个文件&#xff0c;可以用通配符 / 借助bash脚本 1.定义变量名&#xff0c;使用引号 a"bestqc.com.map" b"Anno.variant_function" c"enrichment/GOe…

访问网站时你的电脑都做了什么

电脑在访问百度时 首先在本地hosts文件里面查看本地有无域名对应的IP地址&#xff0c;若有就直接返回。若无&#xff0c;则本地DNS服务器当DNS的客户&#xff0c;向其它根域服务器发送报文查询IP地址&#xff0c;简单来说就是帮助主机查找IP&#xff0c;所以递归查询就在客户端…

【Ubuntu】远程连接乌班图的方式-命令行界面、图形界面

环境&#xff1a;ubuntu-22.04.2-amd64.iso连接工具&#xff1a;MobaXterm、windows自带远程桌面mstsc.exe重置root密码&#xff1a;Ubuntu默认root密码是随机的&#xff0c;需要使用命令sudo passwd 进行重置。 一、命令行界面-SSH连接 1.1 SSH远程环境搭建 # 安装ssh服务&a…

无需训练,这个新方法实现了生成图像尺寸、分辨率自由

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 近日&#xff0c;来自香港中文大学 - 商汤科技联合实验室等机构的研究者们提出了FouriScale&…

【Unity添加远程桌面】使用Unity账号远程控制N台电脑

设置地址&#xff1a; URDP终极远程桌面&#xff1b;功能强大&#xff0c;足以让开发人员、设计师、建筑师、工程师等等随时随地完成工作或协助别人https://cloud-desktop.u3dcloud.cn/在网站登录自己的Unity 账号上去 下载安装被控端安装 保持登录 3.代码添加当前主机 "…

机器视觉系统核心组件的功能深度解析

机器视觉系统作为一个高度集成的技术平台&#xff0c;其内部各个组件的功能性都至关重要。下面是对其核心组件的功能进行的详细分析&#xff1a; 1. 光源系统&#xff1a; 功能&#xff1a; 为被检测物体提供稳定且合适的光照条件&#xff0c;确保图像采集的清晰度和对比度。…

P5356 [Ynoi2017] 由乃打扑克

我手把手教她打扑克 qwq 综合分析一下2个操作&#xff0c;查找区间第k小的值&#xff0c;感觉可以用主席树&#xff0c;区间修改那没事了 考虑分块做法,块长B 分析第一个操作 只需要维护数列的单调性&#xff0c;然后二分答案上二分就ok了 分析第二个操作 维护一个加法懒…

纯小白蓝桥杯备赛笔记--DAY10(字符串)

文章目录 KMP字符串哈希算法简介&#xff1a;斤斤计较的小z--2047字符串hash Manacher回文串的性质算法简介最长回文子串 字典树基础朴素字符串查找步骤前缀判定--1204 01tire算法简介&#xff1a;例题1&#xff1a;例题2&#xff1a; KMP字符串哈希 算法简介&#xff1a; 真前…

使用MQTT.fx接入新版ONENet(24.4.8)

新版ONENet使用MQTT.fx 模拟接入 目录 新版ONENet使用MQTT.fx 模拟接入开始前的准备创建产品设备获取关键参数 计算签名使用MQTT.fx连接服务器数据流准备与上传数据流准备数据发送与接收 开始前的准备 创建产品 设备下载Token签名工具生成签名 创建产品设备 根据以下内容填写…

对等依赖报错问题及解决办法

npm i --legacy-peer-deps npm v7之后对等依赖出现的问题 教学视频 对等依赖报错问题及解决办法【渡一教育】_哔哩哔哩_bilibili

java使用while循环输出2-100的所有素数

使用while循环输出2-100的所有素数,每行输出5个 分析:素数:只能被1和自己整除的自然数 public static void main(String[] args) {int num 2;int count 0;int count1 0;while (num < 100) {for (int i 1; i < num; i) {if (num % i 0) {count;}}if (count 2) {Sys…

C++中高阶数据结构(AVL树的原理讲解)

AVL树 AVL树的定义 avl本质是搜索树,是高度平衡二叉搜索树.特点是:任何树的左右子树的高度差不超过1.最大的高度差值最大也只能是1,也称之为平衡因子, 平衡因子就是右子树减去左子树的值,这个值的绝对值的最大值只能是1.这个平衡因子不是必须的,只是一种控制方式,方便我们更…

5. TypeScript中的数组和元组

在TypeScript中&#xff0c;数组和元组是组织和管理数据的重要工具。本文将深入探讨TypeScript中数组和元组的使用&#xff0c;包括它们的定义、操作方法以及在实际开发中的应用。 数组的使用 数组是一种线性数据结构&#xff0c;尽管在JavaScript可以存取不同的数据类型&…

script标签中defer和async的区别

如果没有defer或async属性&#xff0c;浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素&#xff0c;读取到就会开始加载和执行&#xff0c;这样就阻塞了后续文档的加载。 js脚本网络加载时间&#xff0c;红色代表js脚本执行时间&#xff0c;绿色代表html解析…

每日OJ题_两个数组dp⑥_力扣97. 交错字符串

目录 力扣97. 交错字符串 解析代码 力扣97. 交错字符串 97. 交错字符串 难度 中等 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子…

day21-二叉树part08

235. 二叉搜索树的最近公共祖先 相对于 二叉树的最近公共祖先 本题就简单一些了&#xff0c;因为 可以利用二叉搜索树的特性无需全部遍历。特点&#xff1a;当前节点在p&#xff0c;q节点之前则必为最近公共祖先 class Solution {public TreeNode lowestCommonAncestor(TreeNo…