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

 

实现代码 

<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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch 索引文档时create、index、update的区别【学习记录】

本文基于elasticsearch7.3.0版本。 一、思维导图 elasticsearch中create、index、update都可以实现插入功能&#xff0c;但是实现原理并不相同。 二、验证index和create 由上面思维导图可以清晰的看出create、index的大致区别&#xff0c;下面我们来验证下思维导图中的场景&…

树莓派ubuntu22桌面配置(一)

烧录系统至树莓派 下载系统&#xff1a;https://ubuntu.com/download/raspberry-pi 选择合适的版本下载 镜像安装器安装&#xff1a;终端输入&#xff1a; sudo snap install rpi-imager 打开镜像安装器&#xff0c;按照需求选择树莓派版本与要写入的系统还有安装的u盘 方案…

YOLOv5源码中的参数超详细解析(7)— yolo.py

前言:Hello大家好,我是小哥谈。YOLOv5是一种先进的目标检测算法,它可以实现快速和准确的目标检测。yolo.py是YOLOv5项目中的一个Python文件,用于实现目标检测算法。该文件包含了YOLOv5模型的定义、训练和推理过程。本节课就结合源码对yolo.py文件进行逐行解析~!🌈 前期…

【Vue3】2-12 : 【案例】搜索关键词加筛选条件的综合

本书目录&#xff1a;点击进入 一、【案例】搜索关键词加筛选条件的综合 1.1、逻辑 1.2、效果 1.3、json数据 - 02-data.json 1.4、代码 一、【案例】搜索关键词加筛选条件的综合 1.1、逻辑 计算属性 - 绑定list&#xff0c;并过滤 input 双向绑定 - 当input改变时&…

带你拿捏SpringBoot自动装配的核心技术?模块装配(@EnableXXX注解+@Import)+ 条件装配(@ConditionalXXX)

文章目录 Profile激活指定配置文件主配置文件中指定激活的profile命令行激活设置虚拟机参数激活 profile控制不到的地方 Spring原生的条件装配注解ConditionalConditional接口讲解案例讲解 Spring Boot封装的条件装配注解ConditionalXXX自己实现ConditionalOnBeanSpringBoot 源…

NLP论文阅读记录 - WOS | 2022 使用语言特征空间的抽象文本摘要的神经注意模型

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作三.本文方法3.1 总结为两阶段学习3.1.1 基础系统 3.2 重构文本摘要 四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 Neural A…

熊猫电竞赏金电竞系统源码 APP+H5双端 附搭建教程 支持运营级搭建

简介: 熊猫电竞赏金电竞系统源码 APP+H5双端 附搭建教程 支持运营级搭建 可搭建!运营级!首次公开! 赏金赛源码,用户通过平台打比赛,赢了获得奖金奖励, 金币赛、赏金赛、vip赛等种赛事 可开王者荣耀、和平精英比赛 支持1v1、单排、双排组、战队排等多种比赛模式 …

【Kafka-3.x-教程】-【六】Kafka 外部系统集成 【Flume、Flink、SpringBoot、Spark】

【Kafka-3.x-教程】专栏&#xff1a; 【Kafka-3.x-教程】-【一】Kafka 概述、Kafka 快速入门 【Kafka-3.x-教程】-【二】Kafka-生产者-Producer 【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft 【Kafka-3.x-教程】-【四】Kafka-消费者-Consumer 【Kafka-3.x-教程】-【五…

坚持刷题|翻转二叉树

坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天先刷个简单的&#xff1a;翻转二叉树 题目 226.翻转二叉树 考察点 翻转二叉树又称为镜像二叉树&#xff0c;使用Java实现翻转二叉树通常是为了考察对二叉树的基本操作和递归的理解能力 递归的理解&#xff1a; 能够理解…

TongLINKQ(1):TongLINKQ概述

1 TongLINKQ简介 TongLinkQ 是面向分布式应用的消息中间件产品&#xff0c;主要功能是在应用程序之间进行实时、高效和可靠的传递消息&#xff0c;使得消息在不同的网络协议、不同的计算机系统和不同的应用软件之间进行网络传输。 TongLinkQ 应用程序可灵活地运行在多平台的多…

Vulnhub靶机:driftingblues 2

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;driftingblues2&#xff08;10.0.2.18&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entr…

Http协议简述

目录 HTTP-概述 2.1.1 介绍 2.2.2 特点 2.2 HTTP-请求协议 2.3 HTTP-响应协议 2.3.1 格式介绍 2.3.2 响应状态码 HTTP-概述 2.1.1 介绍 HTTP&#xff1a;Hyper Text Transfer Protocol(超文本传输协议)&#xff0c;规定了浏览器与服务器之间数据传输的规则。 http是互联…

React入门 - 06(TodoList 列表数据的新增和删除)

本章内容 目录 一、实践一下 React 的列表渲染二、TodoList 新增功能三、列表循环的 key四、删除 上一节内容我们完成了输入框中可以自由输入内容&#xff0c;这一节我们继续 TodoList功能的完善&#xff1a;列表数据的新增和删除。 在开始之前&#xff0c;我们先介绍一下 Re…

C++力扣题目222--完全二叉树的节点个数

给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干位置。若最…

目标检测-One Stage-YOLOv7

文章目录 前言一、YOLOv7的不同版本二、YOLOv7的网络结构二、YOLOv7的创新点三、创新点的详细解读ELAN和E-ELANBoF训练技巧计划型重参化卷积辅助训练模块标签分配Lead head guided label assignerCoarse-to-fine lead head guided label assigner 基于级联模型的复合缩放方法 总…

面试官问,如何在十亿级别用户中检查用户名是否存在?

面试官问&#xff0c;如何在十亿级别用户中检查用户名是否存在&#xff1f; 前言 不知道大家有没有留意过&#xff0c;在使用一些app注册的时候&#xff0c;提示你用户名已经被占用了&#xff0c;需要更换一个&#xff0c;这是如何实现的呢&#xff1f;你可能想这不是很简单吗…

java获取已经发送谷歌邮件的打开状态

1.前言 现在网上的方案都是在邮件里面插入一张图片的地址&#xff0c;当收件人打开之后&#xff0c;就会发送请求到指定路径的服务器上&#xff0c;然后在请求的controller里面处理邮件的状态&#xff0c;这个方案确实是行得通的&#xff0c;本文章只是给大家避个坑&#xff0…

从传统训练到预训练和微调的训练策略

目录 前言1 使用基础模型训练手段的传统训练策略1.1 随机初始化为模型提供初始点1.2 目标函数设定是优化性能的关键 2 BERT微调策略: 适应具体任务的精妙调整2.1 利用不同的representation和分类器进行微调2.2 通过fine-tuning适应具体任务 3 T5预训练策略: 统一任务形式以提高…

Vue学习计划-Vue3--核心语法(七)pinia

pinia案例gitee地址 1. pinia 准备一个效果 【搭建 pinia 环境】 安装pinia: npm install pinia/yarn add pinia第二步&#xff1a;操作src/main.ts import { createApp } from vue import App from ./App.vue/* 引入createPinia&#xff0c;用于创建pinia */ import { crea…