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>

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

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

相关文章

深度学习优化器【学习率调整和梯度修正,Optimizer】

文章目录 一、学习率调整1 余弦退火&#xff08;1&#xff09;Warm up&#xff08;2&#xff09;Cosine Anneal 2 AdaGrad3 RMSprop算法4 AdaDelta算法 二、梯度估计修正1 动量法2 Nesterov加速梯度3 Adam修正的原因 4 AdamW 三、总结参考资料 在当今快速发展的人工智能领域&am…

运算符重载详解,日期类型的实现

一、运算符重载 当运算符被⽤于类类型的对象时&#xff0c;C语⾔允许我们通过运算符重载的形式指定新的含义。C规定类类型对象使⽤运算符时&#xff0c;必须转换成调⽤对应运算符重载&#xff0c;若没有对应的运算符重载&#xff0c;则会编译报错。 类中含有多种变量&#xff0…

windows 11 配置 kafka 使用SASL SCRAM-SHA-256 认证

1. 下载安装apache-zookeeper-3.9.2 配置 \conf\zoo.cfg # The number of milliseconds of each tick tickTime2000 # The number of ticks that the initial # synchronization phase can take initLimit10 # The number of ticks that can pass between # sending a requ…

什么是FUSE用户态文件系统

零. 文件系统 1. 为什么要有文件系统 文件系统是操作系统中管理文件和目录的一种机制。它提供了组织、存储、检索和更新文件的方法&#xff0c;主要如下&#xff1a; 数据组织&#xff1a;文件系统将数据组织成文件和目录&#xff0c;使用户能够更方便地管理和查找文件。每个…

HarmonyOS 5.0应用开发——音频播放组件的封装

【高心星出品】 文章目录 音频播放组件的封装开发步骤封装类代码测试代码 音频播放组件的封装 鸿蒙中提供了AVPlayer来实现音频播放的功能&#xff0c;播放的全流程包含&#xff1a;创建AVPlayer&#xff0c;设置播放资源&#xff0c;设置播放参数&#xff08;音量/倍速/焦点模…

(10)文件操作

1. 文件指针的概念和定义 在 C 语言中&#xff0c;文件指针是一种特殊的指针&#xff0c;用于指向一个文件结构体。这个结构体包含了文件的各种信息&#xff0c;如文件名、文件状态、当前文件位置指针等。通过文件指针&#xff0c;程序可以对文件进行各种操作。 文件指针的定…

KPRCB结构之ReadySummary和DispatcherReadyListHead

ReadySummary: Uint4B DispatcherReadyListHead : [32] _LIST_ENTRY 请参考 _KTHREAD *__fastcall KiSelectReadyThread(ULONG LowPriority, _KPRCB *Prcb)

【染色时间】

题目 代码 #include <bits/stdc.h> using namespace std; #define x first #define y second typedef pair<int,int> PII; const int N 510; int dx[] {0,0,-1,1}, dy[] {-1,1,0,0}; int d[N][N], w[N][N]; int n, m; void bfs() {memset(d, 0x3f, sizeof d);q…

了解神经网络中的激活函数

一、激活函数的特征 非线性&#xff0c;激活函数必须是非线性函数。可微性&#xff0c;训练网络模型时&#xff0c;基于梯度的模型最优化方法要求激活函数必须是可导的。单调性&#xff0c;单调递增或单调递减&#xff0c;单调函数保证模型的简单。隐藏层一般需要使用激活函数…

Apache Dubbo (RPC框架)

本文参考官方文档&#xff1a;Apache Dubbo 1. Dubbo 简介与核心功能 Apache Dubbo 是一个高性能、轻量级的开源Java RPC框架&#xff0c;用于快速开发高性能的服务。它提供了服务的注册、发现、调用、监控等核心功能&#xff0c;以及负载均衡、流量控制、服务降级等高级功能。…

利用钉钉与金蝶云星空进行付款单自动化集成

钉钉数据集成到金蝶云星空&#xff1a;付款申请单下推生成付款单的技术实现 在企业日常运营中&#xff0c;数据的高效流转和准确处理是业务顺利进行的关键。本文将分享一个具体的系统对接集成案例&#xff1a;如何将钉钉平台上的付款申请单&#xff0c;通过轻易云数据集成平台…

前端八股文第七篇

61. React 中有对状态管理做进一步封装吗 在 React 中&#xff0c;除了可以使用原生的状态管理方式&#xff08;即使用组件的 state 属性&#xff09;外&#xff0c;还有一些第三方库对状态管理进行了进一步封装&#xff0c;以提供更强大和便捷的状态管理功能。其中最常见的是…

青少年编程能力等级测评CPA Python编程(一级)

青少年编程能力等级测评CPA Python编程(一级) &#xff08;考试时间90分钟&#xff0c;满分100分&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; 下列语句的输出结果是&#xff08; &#xff09;。 print(35*2) A&a…

JavaScript语法基础(函数,对象,常用类Array,String,Math和Date)【超详细!!!新手入!!!】

一、函数 1、函数的定义 函数指的是一段可被重复调用的代码块。函数与变量不同&#xff0c;需要先定义再调用。 定义函数的语法格式为&#xff1a; function 函数名&#xff08;参数1&#xff0c;参数2&#xff0c;...&#xff09; { 语句&#xff1b; …

每日OJ题_牛客_NC6二叉树中的最大路径和_树形DP_C++_Java

目录 牛客_NC6二叉树中的最大路径和_树形DP 题目解析 C代码 Java代码 牛客_NC6二叉树中的最大路径和_树形DP 二叉树中的最大路径和_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a; 二叉树里面的路径被定义为:从该树的任意节点出发&#xff0c;经过父>子或者子>…

PG数据库 jsonb字段 模糊查询

背景&#xff1a; 项目由于多语言的设计&#xff0c;将字段设置成json字段类型&#xff0c;同时存储中文和英文 页面上通过输入框实现模糊的查询 一、表结构&#xff1a;name字段设置jsonb类型 二、表数据 3、Mybatis编写sql select pp.name ->>zh-CN as pmsProductNam…

啊手动阀示范点

1、阿发是否 2、撒阿斯顿发生 目录 1、阿发是否 2、撒阿斯顿发生

黑龙江某涝区泵闸站自动化、信息化改造项目案例

项目背景 黑龙江某地区紧邻松花江&#xff0c;雨季时降雨量增大&#xff0c;排水渠水位上涨&#xff0c;如果出现排涝不及时&#xff0c;水位过高时会漫入周边农田&#xff0c;引发洪涝灾害&#xff0c;对作物生长造成重大损害。为应对这一问题&#xff0c;自今年起&#xff0c…

奥数与C++小学四年级(第十八题 小球重量)

参考程序代码&#xff1a; #include <iostream> #include <vector>int main() {// 小球的重量std::vector<int> weights {1, 2, 3, 4, 5};// 用来存储可能的结果int a, b, c, d, e, x;// 穷举所有可能的 a, b, c, d, e 的组合for (int i 0; i < weight…

建筑行业知识库搭建:好处、方法与注意事项

在建筑行业&#xff0c;知识管理对于提升项目效率、降低成本、增强创新能力以及构建竞争优势具有至关重要的作用。搭建一个高效、系统的建筑行业知识库&#xff0c;不仅有助于实现知识的有效沉淀与便捷共享&#xff0c;还能促进知识在项目实践中的灵活应用&#xff0c;从而加速…