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

ElementUI el-table 多选以及点击某一行的任意位置就勾选上

1. 需求

在el-table中,需要实现多选功能,并且点击某一行的任意位置就勾选上,而不是点击复选框才勾选上。

2. 实现思路

  1. 在el-table中添加ref属性,用于获取表格实例。
  2. 在el-table-column中添加type="selection"属性,用于显示复选框。
  3. 在el-table中添加@row-click="handleRowClick"属性,用于点击某一行的任意位置就获取到。
  4. 在handleRowClick方法中,通过toggleRowSelection方法来勾选或取消勾选当前行。

3. 代码实现

<template><el-tableref="tableRef":data="tableData"@selection-change="handleSelectionChange"@row-click="handleRowClick"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template><script>
import { ref, reactive } from 'vue'
const tableRef = ref(); // 获取表格实例
const state = reactive({tableSelections: [] as any[],
})
/*** 表格,多选*/
const handleSelectionChange = (val: any) => {state.tableSelections = val// console.log(val, '---val')
}
<!--  -->
function handleRowClick(row: any) {// 判断当前行是否被选中const isSelected = state.tableSelections.includes(row);// 如果当前行被选中,则取消选中;如果当前行未被选中,则选中tableRef.value?.toggleRowSelection(row, !isSelected);
}
</script>

相关文章:

ElementUI el-table 多选以及点击某一行的任意位置就勾选上

1. 需求 在el-table中&#xff0c;需要实现多选功能&#xff0c;并且点击某一行的任意位置就勾选上&#xff0c;而不是点击复选框才勾选上。 2. 实现思路 在el-table中添加ref属性&#xff0c;用于获取表格实例。在el-table-column中添加type"selection"属性&…...

博物馆3D数字化的优势有哪些?

博物馆的3D数字化进程正不断向前推进&#xff0c;这一创新技术在提升观展体验、促进文化传播以及加强文物保护方面&#xff0c;均展现出了显著的优势。 一、观展体验的革命性提升 1、动态与多角度展示&#xff1a; 3D云展览利用先进的数字化技术&#xff0c;使文物能够以动态…...

Hi3516/Hi3519DV500移植YOLOV5、YOLOV6、YOLOV7、YOLOV8开发环境搭建--YOLOV5工程编译移植到开发板测试--(5)

专栏链接如下&#xff1a; Hi3516/Hi3519DV500移植YOLOV5、YOLOV6、YOLOV7、YOLOV8开发环境搭建--安装Ubuntu18.04--&#xff08;1&#xff09; Hi3516/Hi3519DV500移植YOLOV5、YOLOV6、YOLOV7、YOLOV8开发环境搭建--安装开发环境AMCT、依赖包等--&#xff08;2&#xff09;…...

springboot揭秘00-基于java配置的spring容器

文章目录 【README】【1】基本概念&#xff1a;Configuration与Bean【2】使用AnnotationConfigApplicationContext实例化spring容器【2.1】使用java配置简单构建spring容器【2.1.1】AnnotationConfigApplicationContext与Component及JSR-330注解类一起使用 【2.2】使用register…...

docker配置mysql

手动拉取 MySQL 镜像 docker pull mysql 创建并运行 MySQL 容器&#xff08;docker run&#xff09; docker run -d \--name mysql \-p 3306:3306 \-e TZAsia/shanghai \-e MYSQL_ROOT_PASSWORD123 \mysql -d&#xff1a;以守护进程&#xff08;daemon&#xff09;模式运行…...

说说Dubbo有哪些核心组件?

说说Dubbo有哪些核心组件&#xff1f; 简单来说&#xff0c;就是服务提供者Provider&#xff0c;服务消费者Consumer&#xff0c;服务注册中心Registry&#xff0c;服务监控器Monitor&#xff0c;通信协议Protocol Dubbo 是一款高性能、轻量级的开源 Java RPC 框架&#xff0…...

视频文件损坏无法播放怎么办?有什么办法可以修复视频吗?

人人都是自媒体的时代&#xff0c;我们已不再满足单纯的图片及声音传播&#xff0c;拍摄短视频的需求日渐增高。但随之也带来了许多问题&#xff0c;比如&#xff1a;拍摄的视频在保存或转移拷贝过程出现问题导致视频文件损坏无法播放。遇到这种情况时怎么办&#xff1f;有什么…...

flutter ios ffi 调试 .a文件 debug可以 release 不行

在 Flutter 中使用 FFI&#xff08;Foreign Function Interface&#xff09;时&#xff0c;如果你在调试模式下能够正常工作&#xff0c;而在发布模式下却遇到问题&#xff0c;使用Object-c原生调用可以使用&#xff0c;开启去掉优化也可以&#xff0c;可能的原因在发布模式下&…...

ADB指定进程名称kill进程

adb shell ps | grep <process_name> | awk {print $2} | xargs adb shell killadb shell ps&#xff1a;列出所有正在运行的进程。grep <process_name>&#xff1a;筛选出包含指定进程名称的行。awk ‘{print $2}’&#xff1a;提取输出中的第二列&#xff08;通常…...

巨好看的登录注册界面源码

展示效果 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevic…...

Python 数据结构

1.概念 数据结构是计算机科学中的一个核心概念&#xff0c;它是指数据的组织、管理和存储方式&#xff0c;以及数据元素之间的关系。数据结构通常用于允许高效的数据插入、删除和搜索操作。 数据结构大致分为几大类&#xff1a; 线性结构&#xff1a;数组、链表、栈、队列等…...

计算机网络八股文个人总结

1.TCP/IP模型和OSI模型的区别 在计算机网络中&#xff0c;TCP/IP 模型和 OSI 模型是两个重要的网络协议模型。它们帮助我们理解计算机通信的工作原理。以下是它们的主要区别&#xff0c;以通俗易懂的方式进行解释&#xff1a; 1. 模型层数 OSI 模型&#xff1a;有 7 层&#…...

Flutter使用share_plus是提示发现了重复的类

问题描述 我现在下载了share_plus包后发现代码编译不通过&#xff0c;并提示Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.22 (org.jetbrains.kotlin:kotlin-stdlib:1.8.22) and jetified-kotlin-stdlib-jdk8-1.7…...

【Linux】编辑器vim 与 编译器gcc/g++

目录 一、编辑器vim&#xff1a; 1、对vim初步理解&#xff1a; 2、vim的模式&#xff1a; 3、进入与退出&#xff1a; 4、vim命令模式下的指令集&#xff1a; 移动光标&#xff1a; 删除&#xff1a; cv&#xff1a; 撤销&#xff1a; 其他&#xff1a; 5、vim底行模…...

音频中sample rate是什么意思?

‌sample rate‌在数字信号处理中&#xff0c;指的是‌采样频率‌&#xff0c;即每秒钟从连续信号中抽取的样本数量。采样频率越高&#xff0c;信号的还原度越高&#xff0c;但同时也会增加计算负担和存储需求‌。 实际应用场景 在音频处理中&#xff0c;设置合适的采样率可以…...

Java思想

学习韩老师的java课程 一步一步拆解需求&#xff0c;先写死的再写活的 首先我只是写了个输出一个*的程序 然后写了输出靠墙的1到n&#xff0c;n排n个的*符号输出程序 再写了加入空格的实心金字塔程序&#xff0c;最后写了这个镂空的金字塔 一下就是成品 import java.util.Sc…...

演练纪实丨 同创永益圆满完成10月份灾备切换演练支持

2024年10月&#xff0c;同创永益共支持5家客户圆满完成灾备切换演练&#xff0c;共涉及70多套核心系统总切换与回切步骤6000余个&#xff0c;成功率100%&#xff0c;RTO时长均达到客户要求。 其中耗时最短的一次演练仅花费约3个小时&#xff0c;共涉及32套系统的灾备切换演练&a…...

UE Mutiplayer(1):网络概述

文章目录 一、Replication二、基本网络概念2.1 网络模式和服务器类型2.2 Actor复制2.3 网络角色和授权2.4 客户端拥有权2.5 相关性和优先级 三、变量复制四、远程过程调用(RPC) 一、Replication 在虚幻引擎中&#xff0c;在客户端与服务器间同步数据和调用程序的过程被称为复制…...

【SQL Server】中关于 COUNT 的一些使用方式区别

前言 使用 SQL Server时&#xff0c;对表或查询结果计算行数是一种常见的操作。了解一些使用 COUNT(*)、COUNT(1) 和 DISTINCT COUNT等的区别对于编写经过优化的高效查询至关重要。本文我们一起探讨这些使用COUNT方式&#xff0c;了解它们的差异与使用。 方式差异 1、COUNT(…...

第5关:主合取范式

任务描述 编程要求 输入 输出 输入样例 输出样例 任务描述 本关任务&#xff1a;求公式(p∨q)→r的主合取范式。 编程要求 根据提示&#xff0c;在右侧编辑器补充代码&#xff0c;计算并输出公式(p∨q)→r的主合取范式 输入 本题无输入。 输出 在单独的一行中输出公式的主合…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

线程与协程

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

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

HTML中各种标签的作用

一、HTML文件主要标签结构及说明 1. <&#xff01;DOCTYPE html> 作用&#xff1a;声明文档类型&#xff0c;告知浏览器这是 HTML5 文档。 必须&#xff1a;是。 2. <html lang“zh”>. </html> 作用&#xff1a;包裹整个网页内容&#xff0c;lang"z…...

HarmonyOS-ArkUI 自定义弹窗

自定义弹窗 自定义弹窗是界面开发中最为常用的一种弹窗写法。在自定义弹窗中&#xff0c; 布局样式完全由您决定&#xff0c;非常灵活。通常会被封装成工具类&#xff0c;以使得APP中所有弹窗具备相同的设计风格。 自定义弹窗具备的能力有 打开弹窗自定义布局&#xff0c;以…...