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

鼠标滑动选中表格部分数据列(vue指令)

文章目录

  • 代码
    • 指令代码
    • 使用代码

代码

指令代码

// 获得鼠标移动的范围
function getMoveRange(startClientX, endClientX, startClientY, endClientY) {const _startClientX = Math.min(startClientX, endClientX);const _endClientX = Math.max(startClientX, endClientX);const _startClientY = Math.min(startClientY, endClientY);const _endClientY = Math.max(startClientY, endClientY);// 判断鼠标移动的距离是否大于 10const moveX = _endClientX - _startClientX;const moveY = _endClientY - _startClientY;return {moveX,moveY,};
}// 获得鼠标划过的行索引
function getRowRangeIndex(startRowIndex, endRowIndex) {const start = Math.min(startRowIndex, endRowIndex);const end = Math.max(startRowIndex, endRowIndex);return {start,end,};
}const rangeselect = {async bind(el, binding, vnode) {const rangeDiv = document.createElement('div');rangeDiv.id = 'rangeSelectDiv';rangeDiv.style.display = 'none';rangeDiv.style.position = 'absolute';rangeDiv.style.pointerEvents = 'none';rangeDiv.style.zIndex = 9999;rangeDiv.style.backgroundColor = '#0088ff40';rangeDiv.style.top = 0;rangeDiv.style.left = 0;rangeDiv.style.border = '1px solid #0088ff';document.body.append(rangeDiv);let mousedown = false;let startRowIndex = -1;let endRowIndex = -1;let startClientX = 0; // 用于计算移动的距离let startClientY = 0; // 用于计算移动的距离let endClientX = 0; // 用于计算移动的距离let endClientY = 0; // 用于计算移动的距离const { componentInstance: $table } = await vnode;el.onmousedown = (event) => {const cell = event.target.closest('td');if (cell) {const elCheckboxElement = cell.querySelector('.el-checkbox');if (elCheckboxElement) {event.preventDefault();mousedown = true;const rowIndex = cell.parentNode.rowIndex;if (binding.value.handleMouseDown) {binding.value.handleMouseDown(rowIndex);}startRowIndex = rowIndex;endRowIndex = rowIndex;startClientX = event.clientX;startClientY = event.clientY;endClientX = event.clientX;endClientY = event.clientY;rangeDiv.style.top = `${startClientY}px`;rangeDiv.style.left = `${startClientX}px`;rangeDiv.style.display = 'block';}}};el.onmousemove = (event) => {if (mousedown) {el.style.userSelect = 'none';event.preventDefault();endClientX = event.clientX;endClientY = event.clientY;const xDiff = endClientX - startClientX;const yDiff = endClientY - startClientY;rangeDiv.style.height = `${Math.abs(yDiff)}px`;rangeDiv.style.width = `${Math.abs(xDiff)}px`;if (xDiff >= 0 && yDiff >= 0) {rangeDiv.style.transform = '';} else if (xDiff < 0 && yDiff < 0) {rangeDiv.style.top = `${endClientY}px`;rangeDiv.style.left = `${endClientX}px`;} else if (xDiff > 0 && yDiff < 0) {rangeDiv.style.top = `${endClientY}px`;} else if (xDiff < 0 && yDiff > 0) {rangeDiv.style.left = `${endClientX}px`;}const moveRange = getMoveRange(startClientX, endClientX, startClientY, endClientY);// 判断鼠标移动的距离是否大于 10if (moveRange.moveY > 10 && moveRange.moveX > 5 && startRowIndex > -1 && endRowIndex > -1) {const cell = event.target.closest('td');if (cell) {const rowIndex = cell.parentNode.rowIndex;endRowIndex = rowIndex;const rowRangeIndex = getRowRangeIndex(startRowIndex, endRowIndex);if (!event.ctrlKey) {$table.clearSelection();}for (let i = rowRangeIndex.start; i <= rowRangeIndex.end; i++) {if (binding.value.handleMousemove) {binding.value.handleMousemove(i, true)}}}}}};el.onmouseup = () => {mousedown = false;rangeDiv.style.height = '0px';rangeDiv.style.width = '0px';rangeDiv.style.top = '0px';rangeDiv.style.left = '0px';rangeDiv.style.display = 'none';startRowIndex = -1;endRowIndex = -1;el.style.userSelect = 'text';};},
};

使用代码

<!-- vue-template -->
<el-table ref="tableRef" v-rangeselect="{handleMousemove}" :data="tableData" border stripe><el-table-column type="selection" width="55"></el-table-column><el-table-column label="序号" width="60"></el-table-column>
</el-table>
// vue-script
{data() {return {tableData: [],}},directives: {rangeselect},methods: {handleMousemove(rowIndex, checked) {const table = this.$refs.tableRef;const tempTableData = this.tableData[rowIndex];table.toggleRowSelection(tempTableData, checked);},}
}

相关文章:

鼠标滑动选中表格部分数据列(vue指令)

文章目录 代码指令代码使用代码 代码 指令代码 // 获得鼠标移动的范围 function getMoveRange(startClientX, endClientX, startClientY, endClientY) {const _startClientX Math.min(startClientX, endClientX);const _endClientX Math.max(startClientX, endClientX);con…...

“5G+Windows”推动全场景数字化升级:美格智能5G智能模组SRM930成功运行Windows 11系统

操作系统作为连接用户与数字世界的桥梁&#xff0c;在数字化迅速发展的时代扮演着至关重要的角色&#xff0c;智能设备与操作系统的协同工作&#xff0c;成为推动现代生活和商业效率的关键力量。其中&#xff0c;Windows系统以其广泛的应用基础和强大的兼容性成为全球最广泛使用…...

c语言学习,isupper()函数分析

1&#xff1a;isupper() 函数说明&#xff1a; 检查参数c&#xff0c;是否为大写英文字母。 2&#xff1a;函数原型&#xff1a; int isupper(int c) 3&#xff1a;函数参数&#xff1a; 参数c&#xff0c;为检测整数 4&#xff1a;返回值&#xff1a; 参数c是大写英文字母&…...

Adnroid 数据存储:SharedPreferences详解【SharedPreferencesUtils,SharedPreferences的ANR】

目录 1&#xff09;SP是什么、如何使用&#xff0c;SPUtils 2&#xff09;SP的流程 3&#xff09;comit和apply 一、SP是什么&#xff0c;如何使用&#xff0c;SPUtils 1.1 SP是什么&#xff1f; SharedPreferences是Android平台提供的一种轻量级的数据存储方式&#xff0c;…...

Sentinel 规则持久化到 Nacos 实战

前言&#xff1a; 前面系列文章我们对 Sentinel 的作用及工作流程源码进行了分析&#xff0c;我们知道 Sentinel 的众多功能都是通过规则配置完成的&#xff0c;但是我们前面在演示的时候&#xff0c;发现 Sentinel 一重启&#xff0c;配置的规则就没有了&#xff0c;这是因为…...

服务器CPU天梯图2024年8月,含EYPC/至强及E3/E5

原文地址&#xff08;高清无水印原图/持续更新/含榜单出处链接&#xff09;&#xff1a; >>>服务器CPU天梯图<<< 本文提供的服务器CPU天梯图数据均采集自各大专业网站&#xff0c;榜单图片末尾会标准其来源&#xff08;挂太多链接有概率会被ban&#xff0c;…...

SpringBoot加载dll文件示例

1、将动态库放在resource文件目录下 2、编写相关加载逻辑 import lombok.extern.slf4j.Slf4j; import java.io.File; import java.io.IOException; import java.lang.reflect.Field; import java.util.HashMap;/*** Description: 加载动态库 .dll文件* author: Be.insighted* c…...

9.C基础_指针与数组

数组指针&#xff08;一维数组&#xff09; 数组指针就是" 数组的指针 "&#xff0c;它是一个指向数组首地址的指针变量。 1、数组名的含义 对于一维数组&#xff0c;数组名就是一个指针&#xff0c;指向数组的首地址。 基于如下代码进行分析&#xff1a; int a…...

C语言——结构体与共用体

C语言——结构体与共用体 结构体共用体 结构体 如果将复杂的复杂的数据类型组织成一个组合项&#xff0c;在一个组合项中包含若干个类型不同&#xff08;当然也可以相同&#xff09;的数据项。 C语言允许用户自己指定这样一种数据结构&#xff0c;它称为结构体。 结构体的语法…...

vs+qt项目转qt creator

1、转换方法 打开vs工程&#xff0c;右键项目&#xff0c;Qt->Create Base .pro File 后面默认OK 如果工程有include和lib路径需要配置&#xff0c;则转换后的工程&#xff0c;需要修改pro文件 2.修改pro文件 例如转换后的工程如下&#xff1a; 修改后 # ------------…...

微信小程序 checkbox 实现双向绑定以及特殊交互处理

wxml文件代码如下&#xff1a; <!--页面顶部 引入wxs文件--> <wxs module"tools" src"../../filter/tools.wxs"></wxs> ... <checkbox-group bindchange"checkboxChange"><label class"weui-cell weui-check__…...

我在高职教STM32——I2C通信之读写EEPROM(1)

大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正是如此,才有了借助CSDN平台寻求认同感和成就感的想法。在这里,我准备陆续把自己花了很多心思设计的教学课件分…...

【ARM】应用ArmDS移植最小FreeRTOS系统

【更多软件使用问题请点击亿道电子官方网站】 一、文档背景 FreeRTOS&#xff08;Free Real-Time Operating System&#xff09;是一个开源的实时操作系统内核&#xff0c;广泛应用于嵌入式系统。它具有小巧、灵活、低功耗等特点&#xff0c;支持多任务调度、信号量、队列等实…...

golang下载、上传文件MD5高效计算方法,利用io.TeeReader函数特性 实时计算文件md5签名

在go语言的开发中&#xff0c;当我们在操作下载或者上传文件对象时&#xff0c; 我们可以利用golang内置的io包中的 TeeReader函数特性&#xff0c;高效实时计算文件的md5值。 方法如下&#xff1a; TeeReader高效计算文件md5示例 保存上传文件&#xff0c;并使用文件的md5签…...

TreeMap实现根据值比较

前言&#xff1a; TreeMap普通的排序方法都是根据键来比较来排序&#xff0c;本篇文章实现两种方式实现值排序 1.使用 SortedSet 和 Stream API 如果你想要一个持久化的排序结果&#xff0c;你可以使用 SortedSet 结构来存储键值对的条目。 TreeSet<Map.Entry<String, …...

2024前端面试(内容持续更新)

Vue篇 data为什么是个函数&#xff1f; 在‌Vue中&#xff0c;‌data必须是一个‌函数&#xff0c;这是因为当data是函数时&#xff0c;每个组件实例化时都会调用该函数&#xff0c;返回一个新的数据对象&#xff0c;从而保证每个组件实例拥有独立的数据&#xff0c;避免数据冲…...

接口基础知识5:详解request headers(一篇讲完常见字段)

课程大纲 一、请求头的定义 HTTP请求头部&#xff08;HTTP Request Headers&#xff09;&#xff1a;HTTP协议中的一部分&#xff0c;用于在客户端和服务器之间传递附加信息。这些头部字段提供了关于请求、客户端环境、或请求的上下文的信息。 请求头是键值对的形式&#xff…...

mac的node使用

查看当前Node和npm版本 node -v npm -v安装"n"版本管理工具 sudo npm install -g n 更新node版本 sudo n stable // 稳定版本 sudo n lts // 最新稳定版本 sudo n latest // 最新版本 sudo n xx.xx // 更新到指定版本查看node版本安装集合 n ls切换对应node版…...

HTML - 简易版打字练习

1. 赛博朋克风格的视觉设计 颜色与渐变&#xff1a;通过linear-gradient设置了背景的颜色渐变&#xff0c;使用高饱和度的霓虹色彩&#xff08;如橙色、绿色和蓝色&#xff09;来营造赛博朋克的视觉效果。这种配色方案是赛博朋克风格的典型元素。 立体感和阴影&#xff1a;使用…...

【生成式人工智能-四-chatgpt的训练过程-pretrain预训练自督导式学习督导式学习】

大模型是怎么被训练出来的具有人类智慧的 阶段一训练-自我学习-具备知识训练资料self-supervised learning&#xff08;自督导式学习&#xff09; 阶段二-怎么让模型具备人的智慧supervised learning 督导式学习预训练pretrain为什么要用预训练的模型&#xff1f;Adapter逆向工…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...