element-plus table组件单击行切换选中状态、点击高亮行、设置shift或ctrl连续多选和连续取消多选(支持多段选择)

news2024/11/23 15:31:04

演示效果

需求逻辑:

  1. 单击行切换选中状态
  2. 不按住shift或者ctrl键点击一行,设置该行高亮,该行将作为起始行
  3. 连续多选:高亮行作为起始位置,按住shift或者ctrl键后选中行作为结束位置,结束位置未勾选则连续多选
  4. 连续取消多选:高亮行作为起始位置,按住shift或者ctrl键后选中行作为结束位置,结束位置已勾选则连续取消多选
  5. 支持多段选择
    请添加图片描述

完整代码

<template>
  <el-table :data="tableData" border stripe ref="table" highlight-current-row @selection-change="selectionChange" @select="selectChange" @row-click="rowClick">
    <el-table-column type="selection" width="62" align="center" />
    <el-table-column type="index" label="序号" width="62" align="center" />
    <el-table-column prop="type" label="分类" width="102" align="center" />
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      startPoint: undefined, // 多选起点
      endPoint: undefined, // 多选终点
      shiftOrCtrlkeyDown: false, // 是否按下shift键或ctrl键,默认false
      selectedRowsArr: [], // 多选选中的行
      tableData: [], // 表格数据
    }
  },
  mounted() {
    // 按下shift键或ctrl键
    window.addEventListener("keydown", code => {
      if (code.key === "Shift" || code.key === "Control") {
        this.shiftOrCtrlkeyDown = true
      }
    })
    // 松开shift键或ctrl键
    window.addEventListener("keyup", code => {
      if (code.key === "Shift" || code.key === "Control") {
        this.shiftOrCtrlkeyDown = false
      }
    })
    // 模拟数据
    // 注意,设置index是必要的
    // 注意,设置index是必要的
    // 注意,设置index是必要的
    for (let index = 0; index < 100; index++) {
      this.tableData.push({ type: "test", index })
    }
  },
  methods: {
    /** 表格单击 */
    rowClick(row) {
      this.$refs.table.toggleRowSelection(row) // 单击行切换选中状态
      if (!this.shiftOrCtrlkeyDown) {
        this.startPoint = row.index
        return
      }
      const isCurrentSelected = this.selectedRowsArr.includes(row) // 当前行是否选中
      this.dealRowSelect(row, isCurrentSelected)
    },
    /** 表格多选 */
    selectionChange(rows) {
      this.selectedRowsArr = rows
    },
    /** 表格单选 */
    selectChange(rows, row) {
      if (!this.shiftOrCtrlkeyDown) {
        this.$refs.table.setCurrentRow(row) // 设置行高亮选择,需要加上属性highlight-current-row
        this.startPoint = row.index
        return
      }
      const isCurrentSelected = rows.includes(row) // 当前行是否选中,不能直接用selectedRowsArr判断,因为selectionChange比selectChange后执行
      this.dealRowSelect(row, isCurrentSelected)
    },
    /** 按下shift键或ctrl键选中逻辑 */
    dealRowSelect(row, isCurrentSelected) {
      this.endPoint = row.index
      // 如果是自下而上选择,则换序
      let temp = this.startPoint
      if (this.startPoint > this.endPoint) {
        this.startPoint = this.endPoint
        this.endPoint = temp
      }
      // 根据当前行是选中还是取消选中,来判断是全选还是全不选
      for (let i = this.startPoint + 1; i < this.endPoint; i++) {
        this.$refs.table.toggleRowSelection(this.tableData[i], isCurrentSelected)
      }
      this.$refs.table.setCurrentRow(this.tableData[temp]) // 按下shift键或ctrl键不改变高亮选中行
      // 还原起始位置
      this.startPoint = temp
    },
  },
}
</script>

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

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

相关文章

第2-3-8章 分片上传和分片合并的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

文章目录5.10 接口开发-分片上传5.10.1 分片上传介绍5.10.2 前端分片上传插件webuploader5.10.3 后端代码实现5.10.3.1 接口文档5.10.3.2 代码开发5.10.3.3 接口测试5.11 接口开发-分片合并5.11.1 FileChunkStrategy5.11.2 AbstractFileChunkStrategy5.11.3 LocalChunkServiceI…

OpenFeign源码1-环境搭建及核心类说明

0. 环境 nacos版本&#xff1a;1.4.1Spring Cloud : Hoxton.SR9&#xff08;没用2020.0.2版本后面说明&#xff09;Spring Boot &#xff1a;2.4.4Spring Cloud alibaba: 2.2.5.RELEASESpring Cloud openFeign 2.2.2.RELEASE 测试代码&#xff1a;github.com/hsfxuebao/s… 20…

WebDAV之葫芦儿·派盘+PassStore

PassStore 支持webdav方式连接葫芦儿派盘。 大家常用的qq,手机微信,新浪微博等。假如各个网址都设成同样的帐号和登陆密码,一旦某一帐户泄漏了,别的平台上的账户密码都有被撞库攻击的风险。在不一样的站点设定不一样的高韧性登陆密码才算是最安全可靠的确保,殊不知这般繁…

c++调用tf.keras的模型

​ 环境&#xff1a; ubuntu 20.04 python 3.8 tensorflow-gpu 2.4.0 显卡 nvidia rtx A6000 驱动 495.29.05 cuda 11.5 cudnn 8.3.0 tensorRT 8.4 1.将keras保存的h5模型转成darknet的weight&#xff0c;然后用opencv加载 cv::dnn::Net net cv::dnn::readNetFromDar…

链表中快慢指针的应用

目录 一、链表的中间结点 二、回文链表 三、链表中倒数第K个结点 四、删除链表的倒数第n个结点 一、链表的中间结点 给定一个头结点为 head 的非空单链表&#xff0c;返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 先设置两个low和fast都指…

【MySQL】测试题03

文章目录1、创建数据库2、使用数据库3、创建数据表【3.1】创建学生信息表Student【3.2】创建课程信息表Course【3.3】创建教师信息表Teacher【3.4】创建成绩信息表Score4、添加数据【4.1】向学生student表添加数据【4.2】向课程course表添加数据【4.3】向教师信息teacher表添加…

【动手学深度学习】softmax回归的从零开始实现(PyTorch版本)(含源代码)

目录&#xff1a;softmax回归的从零开始实现一、理论基础1.1 前言1.2 分类问题1.3 网络架构1.4 全连接层的参数开销1.5 softmax运算1.6 小批量样本的矢量化1.7 损失函数1.7.1 对数似然1.7.2 softmax及其导数1.7.3 交叉熵损失1.8 信息论基础1.8.1 熵1.8.2 信息量1.8.3 重新审视交…

19 02-检索满足客户端定义的状态掩码的DTC列表

诊断协议那些事儿 诊断协议那些事儿专栏系列文章&#xff0c;19服务作为UDS中子功能最多的服务&#xff0c;一共有28种子功能&#xff0c;本文将介绍常用的19 02服务&#xff1a;根据状态掩码读取DTC列表。 关联文章&#xff1a; 19服务List 19 01-通过状态掩码读取DTC数目 …

详细教程。2022年滁州市明光市、来安县等各地区高新技术企业申报

安徽省大力鼓励企业申报高新技术企业&#xff0c;于高企申报也有很多奖补。滁州市企业申报奖补政策发布&#xff0c;企业可以根据自身情况申请奖补&#xff0c;奖补金额为10万元至30万元不等&#xff0c;明光市&#xff0c;凤阳县等各地区奖补申请可以通过市级机关办理。 下面小…

跟艾文学编程《Python数据可视化》(01)基于Plotly的动态可视化绘图

作者&#xff1a;艾文&#xff0c;计算机硕士学位&#xff0c;企业内训讲师和金牌面试官&#xff0c;公司资深算法专家&#xff0c;现就职BAT一线大厂。邮箱&#xff1a;1121025745qq.com博客&#xff1a;https://wenjie.blog.csdn.net/内容&#xff1a;跟艾文学编程《Python数…

2022-11-21 mysql列存储引擎-架构实现缺陷梳理-P2

摘要: 收集现有代码的糟糕实现&#xff0c;前事不忘后事之师&#xff0c;把这些烂东西定死在耻辱柱上以免再次发生 糟糕的设计: 一. DGMaterializedIterator::GetNextPackrow 函数实现: int DimensionGroupMaterialized::DGMaterializedIterator::GetNextPackrow(int dim, int…

【Linux系统】第一篇:基础指令篇

文章目录一、Linux中的文件二、Linux用户三、Linux基本指令ls指令pwd命令cd指令touch指令mkdir指令rmdir指令rm 指令man指令cp指令mv指令cat指令tac指令more指令less指令head指令tail指令管道重定向date指令cal指令find指令which指令alias指令whereis指令grep指令wc指令sort指令…

Node的web编程(二)

一、JSON数据 1、定义 JavaScript Object Notation&#xff0c;是一种轻量级的前后端数据交换的格式(数据格式)。 2、特点 &#xff08;1&#xff09;容易阅读和编写 &#xff08;2&#xff09;语言无关性 &#xff08;3&#xff09;便于编译、解析 3、语法要求 &#…

Mac m1配置flutter开发环境

Mac m1配置flutter开发环境 文章目录Mac m1配置flutter开发环境一、下载Android Studio二、下载flutter sdk三、新建flutter project四、使用在线环境进行Flutter开发Dart在线运行环境Flutter在线运行环境一、下载Android Studio 进入官网下载&#xff0c;选择苹果芯片版本。 …

【Spring(三)】熟练掌握Spring的使用

有关Spring的所有文章都收录于我的专栏&#xff1a;&#x1f449;Spring&#x1f448; 目录 一、前言 二、通过静态工厂获取对象 三、通过实例工厂获取对象 四、通过FactoryBean获取对象 五、Bean配置信息重用 六、Bean创建顺序 七、Bean对象的单例和多例 八、Bean的生命周期 九…

Weblogic SSRF 漏洞(CVE-2014-4210)分析

Weblogic SSRF 漏洞是一个比较经典的SSRF 漏洞案例&#xff0c;该漏洞存在于 http://127.0.0.1:7001/uddiexplorer/SearchPublicRegistries. jsp 页面中&#xff0c;如图 1-1 所示图 1-1 Weblogic SSRF 漏洞Weblogic SSRF 漏洞可以通过向服务端发送以下请求参数进行触发&#x…

ARFoundation系列讲解 - 70 HumanBodyTracking3D

---------------------------------------------- 视频教程来源于网络,侵权必删! --------------------------------------------- 一、简介 HumanBodyTracking3D(身体跟踪3D)案例,当设备检查到人体时,会返回检测到人体关节点的3D空间位置(需要在iOS 13或更高版本的A12…

瞪羚优化算法(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

Java集合类——ArrayList(扩容机制)

线性表 线性表是n个相同类型元素的有限序列&#xff0c;逻辑上连续物理上不一定是连续的&#xff0c;存储结构上分为顺序存储和链式存储&#xff0c;常见的线性表有&#xff1a;顺序表&#xff0c;链表&#xff0c;栈&#xff0c;队列…… ArrayList 数据结构 ArrayList&am…

赋值运算符重载,取地址及const取地址操作符重载

赋值运算符重载1.运算符重载2.赋值运算符重载3.取地址及const取地址操作符重载如果一个类中什么成员都没有&#xff0c;那么该类简称为空类。而空类中其实并不是真的什么都没有&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。构造函数&…