element复选框表格,实现shift多选

需求: 对表格数据进行批量处理的时候,即使有复选框但是也得需要一个一个选。有点麻烦。

解决: 点击一行之后摁住shift,再选择另一个,两条数据之间的则为选中

<template><el-table :data="tableData" @row-click="handleRowClick"><!-- 省略表格列的定义 --></el-table>
</template>
<script>
export default {data() {return {tableData: [], // 表格数据lastSelectedRow: null, // 上一次选中的行selectedRow: null // 当前选中的行}},methods: {handleRowClick(row,column, event) {this.lastSelectedRow = this.selectedRow // 记录上一次选中的行this.selectedRow = selection[0] // 记录当前选中的行if (this.lastSelectedRow && event.shiftKey) {// Shift 键按下,选中中间的行const startIndex = this.tableData.indexOf(this.lastSelectedRow)const endIndex = this.tableData.indexOf(row)const [start, end] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex]for (let i = start + 1; i < end; i++) {this.$refs.table.toggleRowSelection(this.tableData[i], true)}} else {// Shift 键未按下,正常选中/取消选中一行this.$refs.table.toggleRowSelection(row)}}}
}
</script>

这个还有一个问题。就是页面上的文字则会被选中。 这个可以用css更改

.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE10+/Edge */user-select: none; /* 标准语法 */
}

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

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

相关文章

不方便拉网线,房间又没Wifi信号?按照这个教程,让你家里每个角落都有网

前言 前段时间去了一个朋友家里&#xff0c;她老是和我叨叨说她家的卧室一点Wifi信号都没有。每次一躺床上都只能用手机流量上网。 家里明明有拉宽带&#xff0c;为什么在某一些地方还是得用自己手机流量&#xff1f;哎&#xff0c;有钱人的痛就是房子太大了。 我问她为啥不多…

【Maven】002-Maven 安装和配置

【Maven】002-Maven 安装和配置 文章目录 【Maven】002-Maven 安装和配置一、官网1、官网2、历史版本列表3、Maven 仓库地址 二、下载 Maven 3.8.8 版本1、进入 Maven 3.8.8 版本发行说明页2、进入下载页3、下载4、下载得到 apache-maven-3.8.8-bin.zip 三、Maven 安装1、将安装…

jenkins环境搭建

jenkins环境搭建 1.环境说明2.环境准备1.jdk安装2.安装Git3.安装sshpass4.安装Maven 3.安装Jenkins(war包方式安装)1.安装2.镜像加速 4.官网提供的yum方式安装5.访问 1.环境说明 keyvalue环境centos7jdk版本11git2.43.0maven3.9.6jenkins最新版本http://mirrors.jenkins-ci.or…

【spring源码分析】@Conditional的使用以及分析

Conditional Conditional 一、基本信息二、注解描述三、注解源码四、主要功能五、最佳实践 在Bean上使用在Configuration上使用自定义组合注解 六、时序图七、源码分析八、注意事项九、总结 最佳实践总结源码分析总结 一、基本信息 转载自github&#xff0c;在此作为个人备…

LINUX基础培训六之磁盘和文件系统管理

前言、本章学习目标 掌握fdisk分区类型和管理分区了解parted分区类型掌握LVM模式文件系统创建、扩展、缩小文件系统 一、磁盘的分区管理 在 Linux 中有专门的分区命令 fdisk 和 parted。其中 fdisk 命令较为常用&#xff0c;但不支持大于 2TB 的分区&#xff1b;如果需要支…

C++/WinRT 入门

本主题将会根据新的 Windows 控制台应用程序 (C/WinRT) 项目演练一个简单的代码示例。 C/WinRT 快速入门 创建一个新的 Windows 控制台应用程序(C/WinRT) 项目。 根据实际选择平台 如果出现如下错误&#xff0c;需要安装正确的SDK。 找不到 Windows SDK 版本 10.0.17134.0 (o…

支付功能测试用例测试点?

支付功能测试用例测试点是指在测试支付功能时&#xff0c;需要关注和验证的各个方面。根据不同的支付场景和需求&#xff0c;支付功能测试用例测试点可能有所不同&#xff0c;但一般可以分为以下几类&#xff1a; 功能测试&#xff1a;主要检查支付功能是否符合设计和业务需求…

RTTI结构详细分析(VC++)

对于RTTI结构的资料真的屈指可数,类的逆向也一直是一个不好弄的问题.对此我只想贡献我的一份力量。 文中我不会分析类的内存布局,因为有很多资料已经分析的挺好的了(见参考资料)。但是现有我能找到的资料对RTTI结构的表述不完整,或者表述模糊不清,参考Clang的部分源码后&#…

kube-apiserver参数详解

Global flags 全局选项详解 选项默认值描述–log-file如果不为空,将是日志输出的文件–log-dir如果不为空,将是日志输出的目录–alsologtostderrlog日志会输出到标准错误并且也会输出到文件中–logtostderrtruelog日志会输出到标准错误而不是文件中–log-file-max-size1800定…

寒假刷题第五天

PTA甲级 1022 Digital Library 大模拟 #include<iostream> #include<unordered_map> #include<unordered_set> #include<vector> #include<set>using namespace std;unordered_map<string , set<int>>ti , au , key , pub , year…

Altium designer软件使用

AD工程文件 .prjpcb 工程由sch文件与pcb文件组成&#xff0c;sch文件是原理图文件&#xff0c;pcb文件是layout文件。 原理图SCH .schdoc 1&#xff1a;原理图的标注:加标题和作者 p->t tab 2&#xff1a;查找:ctrlF 3&#xff1a;设置相关功能的快捷键 View菜单下的Tool…

一些前端学习过程的自测练习题

目录 页面设计部分 1 设计一个简单的学院网站首页&#xff1b; 2.按照图示要求完成简单的登录页面 3.完成如下网站设计 4.完成如下网站设计&#xff08;练习页面布局&#xff09; 5 利用下面素材&#xff0c;设计一个满足H5规范的网页&#xff08;移动端页面练习&#xff…

【Delphi 基础知识 17】注释代码的几种方法

在 Delphi 中&#xff0c;有三种主要的注释代码的方法&#xff0c;分别是&#xff1a; 花括号 {} 注释&#xff1a; 这是一种常见的注释方式&#xff0c;在代码中使用花括号将注释的内容括起来。这种注释方式可以用于单行注释和多行注释。// 单行注释 { 这是一个多行注释可以跨…

简单说一下原型与原型链

文章目录 原型原型链 原型 简单来说原型就像是对象的 “爸爸”&#xff0c;每个对象都有一个原型。当你创建一个对象时&#xff0c;这个对象就会有一个内部链接&#xff0c;指向它的原型。你可以把原型想象成对象的一种模板&#xff0c;对象可以从中继承属性和方法。 举个例子…

Java中单体应用锁的局限性分布式锁

互联网系统架构的演进 在互联网系统发展之初&#xff0c;系统比较简单&#xff0c;消耗资源小&#xff0c;用户访问量也比较少&#xff0c;我们只部署一个Tomcat应用就可以满足需求。系统架构图如下: 一个Tomcat可以看作是一个JVM进程&#xff0c;当大量的请求并发到达系统时&…

(每日持续更新)jdk api之FileDescriptor基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

ios 推流 拉流

文章目录 1.协议2.流程3.框架 HaishinKit.swift 1.协议 iOS 直播专题5-推流 简书 2.流程 iOS-直播推拉流 简书 3.框架 HaishinKit.swift HaishinKit.swift - github

Redis:原理速成+项目实战——Redis企业级项目实战终结篇(HyperLogLog实现UV统计)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…

[易语言]使用易语言部署工业级人脸检测模型

【框架地址】 https://github.com/ShiqiYu/libfacedetection 【算法介绍】 Libfacedetection是一个开源的计算机视觉库&#xff0c;主要用于实时的人脸检测。它利用深度学习技术&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;实现了高精度的脸部定位…

了解JavaScript 加密、混淆和生成签名

分析并理解网站的 JavaScript 加密、混淆和生成签名的方法是 JavaScript 逆向工程中的一个重要方面。这些技术通常用于保护代码免遭未授权的访问和修改&#xff0c;或确保数据在传输过程中的安全性。 加密 目的&#xff1a;加密用于保护敏感数据&#xff0c;使得只有拥有正确密…