基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行

news2024/12/24 22:10:19

 

实现代码 

<template>
  <div :class="$options.name">
    <el-table
      style="user-select: none"
      ref="table"
      :data="tableData"
      :row-class-name="row_class_name"
      @mousedown.native="mousedownTable"
      @row-click="row_click"
      @cell-mouse-enter="cell_mouse_enter"
      @cell-mouse-leave="cell_mouse_leave"
      @mouseup.native="mouseupTable"
      @mouseleave.native="mouseupTable"
      @selection-change="selection_change"
    >
      <el-table-column type="selection" width="50" :selectable="selectable" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="ID" label="ID" />
      <el-table-column prop="username" label="用户名" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: "sgBody",
  components: {},
  data() {
    return {
      isMousedownTable: false, //是否按下表格
      currentEnterRow: null, //当前移入的行数据
      tableData: [
        { ID: "330110198704103091", username: "username1" },
        { ID: "330110198704103092", username: "username2" },
        { ID: "330110198704103093", username: "username3" },
        { ID: "330110198704103094", username: "username4", disabled: true },
        { ID: "330110198704103095", username: "username5" },
        { ID: "330110198704103096", username: "username6" },
        { ID: "330110198704103097", username: "username7" },
        { ID: "330110198704103098", username: "username8" },
      ],
      selection: [], //表格选中项数组
    };
  },

  methods: {
    // 屏蔽复选框
    selectable(row) {
      return !row.disabled;
    },
    // 表格按下
    mousedownTable(d) {
      this.currentEnterRow &&
        !this.currentEnterRow.disabled &&
        this.$refs.table.toggleRowSelection(this.currentEnterRow);
      this.isMousedownTable = true;
    },
    // 单击表格行
    row_click(row, column, event) {
      this.currentEnterRow || (!row.disabled && this.$refs.table.toggleRowSelection(row));
    },
    // 进入单元格
    cell_mouse_enter(row, column, cell, event) {
      this.isMousedownTable && !row.disabled && this.$refs.table.toggleRowSelection(row);
      this.currentEnterRow = row;
    },
    // 离开单元格
    cell_mouse_leave(row, column, cell, event) {
      this.currentEnterRow = null;
    },
    // 鼠标弹起或者离开表格
    mouseupTable(d) {
      this.isMousedownTable = false;
    },
    // 表格选中项发生改变
    selection_change(selection) {
      this.selection = selection;
    },
    // 表格每行样式
    row_class_name({ row, rowIndex }) {
      if (row.disabled) return "disabled";
      return this.selection.find((v) => v.ID == row.ID) ? "selected" : "";
    },
  },
};
</script>
<style lang="scss" scoped>
.sgBody {
  >>> .el-table {
    $bgColor: #409eff11;
    tr {
      // 高亮选中行
      &:hover,
      &.selected {
        td {
          background-color: $bgColor !important;
        }
      }
      // 禁用行
      &.disabled {
        $bgColor: #eee;
        td {
          background-color: $bgColor !important;
        }
      }
    }
  }
}
</style>

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

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

相关文章

【微服务】日志搜集es+kibana+filebeat+redis+logstash(单机)

日志搜集系统搭建 基于7.17.16版本 ps: 项目是toB的&#xff0c;日志量不大 前置准备 软件下载 7.17.16版本。8.x版本需要JDK11 elastic.co/downloads/past-releasesJDK java8 Linux elastic 软件不能以root用户启动&#xff0c;需要创建用户 sudo useradd elastic #给此…

leaflet学习笔记-贝塞尔曲线绘制(八)

前言 两点之间的连线是很常见的&#xff0c;但是都是直直的一条线段&#xff0c;为了使连线更加平滑&#xff0c;我们可以使用曲线进行连线&#xff0c;本功能考虑使用贝塞尔曲线进行连线绘制&#xff0c;最后将线段的两端节点连接&#xff0c;返回一个polygon。 贝塞尔简介 …

【LangChain学习之旅】—(4) 模型I/O:输入提示、调用模型、解析输出

【LangChain学习之旅】—&#xff08;4&#xff09; 模型I/O&#xff1a;输入提示、调用模型、解析输出 Model I/OLangChain 中提示模板的构建语言模型为什么选择langchain输出解析总结 Reference&#xff1a;LangChain 实战课 Model I/O 我们可以把对模型的使用过程拆解成三块…

分布式引擎Elasticsearch本地部署并结合内网穿透远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

怎么看待存在争议的低代码?

一、低代码直接效果怎么样&#xff1f; 以体验过的JNPF平台为例&#xff0c;JNPF低代码开发的过程就是可以通过拖拉拽的方式去完成软件开发&#xff0c;复杂功能可以通过二次开发来解决&#xff0c;提升开发效率&#xff0c;降低开发成本。 给大家举个例子&#xff0c;以我们熟…

ORACLE RAC DG文件路径错乱解决办法

最近接手了一个客户的RAC-RAC dg环境的维护,登录上去之后发现dg延迟了8天,由于主库的空间非常紧张,归档日志早就删除了,所以准备使用rman基于scn点的备份恢复的方案恢复dg同步 在备份完成之后,使用新的控制文件进行数据恢复的时候报错datafile 43 not found: 检查了一下发现当…

SpringBoot请求参数加密、响应参数解密

SpringBoot请求参数加密、响应参数解密 1.说明 在项目开发工程中&#xff0c;有的项目可能对参数安全要求比较高&#xff0c;在整个http数据传输的过程中都需要对请求参数、响应参数进行加密&#xff0c;也就是说整个请求响应的过程都是加密处理的&#xff0c;不在浏览器上暴…

[linux]编译一个ko文件并运行

一、需求 有一段代码需要在运行时加载注入内核中&#xff0c;当用户层需要访问时可以提供内核态环境去运行。 二、c代码构建 // #include <errno.h> // #include <string.h> // #include <stdio.h> // #include <fcntl.h> // #include <stdlib.h…

全新小白菜QQ云端机器人登录系统源码 /去除解密授权学习版源码

源码介绍&#xff1a; 全新小白菜QQ云端机器人登录系统源码&#xff0c;是一款经过全面解密的授权学习版源码。 这款源码已解除了授权版的限制&#xff0c;然而许多人可能对其用途并不了解。实际上&#xff0c;该源码主要面向群机器人爱好者设计。它是一个基于挂机宝机器人框…

基于3D Gaussian Splatting与NeRF实现三维重建(使用IPhone创建数据集)

基于Spectacular AI与NeRF实现三维重建-使用IPhone创建数据集 前言项目简介创建数据集扫描处理数据集 解析数据集Python环境 Windows ffmpeg 环境搭建数据集处理安装Nerfstudio需要CUDA环境 依次安装依赖pip install nerfstudio Nerfstudio实现效果开始训练参数配置实时训练浏览…

吐血整理,自动化测试框架总结,一篇从0到1策底打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、什么是框架 定…

目标检测开源数据集——道路坑洼

一、危害 对车辆的影响&#xff1a;道路坑洼会导致车辆行驶不稳&#xff0c;增加车辆的颠簸&#xff0c;不仅影响乘坐舒适度&#xff0c;还可能对车辆的悬挂系统、轮胎等造成损害。长期在坑洼路面上行驶&#xff0c;车辆的减震系统、悬挂系统等关键部件容易受损&#xff0c;进…

(超详细)2-YOLOV5改进-添加SimAM注意力机制

1、在yolov5/models下面新建一个SimAM.py文件&#xff0c;在里面放入下面的代码 代码如下&#xff1a; import torch import torch.nn as nnclass SimAM(torch.nn.Module):def __init__(self, e_lambda1e-4):super(SimAM, self).__init__()self.activaton nn.Sigmoid()self…

中国电子学会2022年12月份青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)

1.运行下列哪段程序&#xff0c;可以让狗狗走到木屋门口&#xff1f;&#xff08;C&#xff09;(2分) A. B. C. D. 答案解析&#xff1a;小窝在狗狗前方90度方向&#xff0c;我们使用程序让狗狗向前移动即可&#xff0c;移动距离不会超过舞台的宽度&#xff08;480&#xf…

git init 执行后发生了什么?

首先在磁盘中创建一个新目录 Git&#xff0c;进入该目录后执行 git init 初始化。这个时候目录下会创建一个隐藏目录 ./git&#xff0c;这个./git 目录叫做 Git 版本库或者仓库 $ git init Initialized empty Git repository in D:/Git/.git/在讲解.git 目录内容前&#xff0c…

Xcode15 升级问题记录

这里写自定义目录标题 新版本Xcode15升级问题1&#xff1a;rsync error: some files could not be transferred (code 23) at ...参考 新版本Xcode15升级 下载地址&#xff1a;https://developer.apple.com/download/all/ 我目前使用的版本是Xcode15.2 我新创建了一个项目&…

《JVM由浅入深学习【七】 2024-01-11》JVM由简入深学习提升分享

亲爱的读者们&#xff0c;欢迎来到本篇博客&#xff0c;这是JVM第七次分享&#xff0c;下面是七个JVM常用常面的分享&#xff0c;请笑纳 目录 1. 几个与JVM 内存相关的核心参数2.如何计算一个对象的大小3.堆为什么要分为新生代和老年代4.JVM堆的年轻代为什么要有两个 Survivor…

分布式限流和本地限流那些事?

分布式限流和本地限流的目的是一样的&#xff0c;当然我建议技术人在自己的服务中优先考虑本地限流&#xff0c;那样对于自己的API的影响会小一点。 限流这种技术&#xff0c;在没有触发限流的阈值的时候&#xff0c;是不会有什么大的问题的&#xff0c;当时一旦触发阈值&…

全网独家:基于openEuler-22.03-LTS-SP4底包构建opengauss 2.1.0 rpm包安装的单机轻量版数据库容器

本文基于openEuler-22.03-LTS-SP4底包,使用rpm安装方式构建opengauss 2.1.0 单机轻量版数据库容器。 一、openEuler-22.03-LTS-SP4底包 1、下载镜像 下载链接 sha256:ffe6c97428d6e684519dd670c18d6681861bdc17719b0387c6e11a65e37a771f openEuler-docker.x86_64.tar.xz …

景联文科技:以高质量数据赋能文生图大模型

1月5日&#xff0c;在智求共赢・中国AIGC产业应用峰会暨无界AI生态合作伙伴大会上&#xff0c;中国AIGC产业联盟联合无界AI发布了《中国AIGC文生图产业白皮书2023》&#xff0c;从AIGC文生图发展历程、主流工具、产业实践以及规模预测等多个维度&#xff0c;全面揭示了中国AIGC…