el-table点击某一行选中改变背景色且执行方法

elementUI table表格点击某一行选中并且改变背景色

使用:row-style="rowStyle"及@row-click=“selectRow”:
其中 selectRow 方法中:
row 输出:当前行的内容
在这里插入图片描述
column 输出:当前列的信息在这里插入图片描述
event 输出:当前事件在这里插入图片描述

<el-tablestyle="width: 100%; border: 1px dashed rgba(128,128,128,0.57); border-top: 0px"height="520px"ref="table":data="typeList":row-style="rowStyle"@row-click="selectRow">
</el-table>
const selectRow = (row, column, event) => {name.value = row.name;  getContent(row.name)  // 每次点击了该行(该行任意位置、任意列)都进行执行该方法
}
// 点击后的效果(点击某一行选中并且改变背景色)
const rowStyle = ({row}) => {if (name.value === row.name) {return {'background-color': 'rgb(235,240,240)', cursor: 'pointer'}  }return {cursor: 'pointer'}
}

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

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

相关文章

小程序支付类型接入京东支付

一、情景描述 当前项目想在微信小程序付款时添加上京东支付支付类型&#xff0c;效果如下 普通的付款方式可以直接付款就能完成支付&#xff0c;但京东支付无法在小程序上直接付款&#xff0c;他需要复制生成的链接&#xff0c;然后打开京东app然后在京东平台上付款。 所以&…

手机云控制发电机组 有网络随时随地操控监控运行

GenCloudTM 发电机组云控系统简介 Ver2.0 目录 公司简介…… …………………………… ………………………………………………1概 述…… …………………………… ………………………………………………1主要功能及特点………… …………… ………… ………………………………

Mac基于VMware安装CentOS

流程偏长&#xff0c;下一步根本点不完&#xff1b; 01 首先&#xff0c;明确下两款软件的版本信息&#xff1b; VMware是【VMware-Fusion-13.5.0】CentOS是【CentOS-7-x86_64-Minimal-1908】&#xff1b; VMware用来管理虚拟机系统&#xff0c;安装就不多说了&#xff0c;双…

【c语言】深入理解指针(2)

1. 字符指针变量 可以利用字符指针存放字符数组来间接存放字符串。 int main() {char arr[10] "abcdef";char* p arr;printf("p %s\n", p);return 0; } 那我们可不可以直接给字符指针存放字符串呢&#xff1f; int main() {char* p1 "abcde…

51单片机学习笔记 --步进电机驱动说明

文章目录 工作原理代码编写驱动方式全步进驱动半步进驱动微步进驱动 工作原理 工作原理简要说明&#xff0c;和单片机一起配合使用的步进电机多为28BYJ28 五线四相步进电机&#xff0c;配合ULN2003驱动板进行控制&#xff0c;如图所示&#xff0c;对于扭矩、精度要求较高的还有…

基于Springboot的高校心理教育辅导设计与实现(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的高校心理教育辅导设计与实现(有报告)。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll 2024/2/2 10:48 https://blog.csdn.net/feinifi/article/details/132548556 Could not locate cudnn_ops_infer64_8.dll. Please make sure it is in your library path!解决办法 安装cuDNN c:\faster-whisper-…

小程序中picker多列选择器

需求&#xff1a;实现类似省市联动的效果&#xff0c;选择第一列后&#xff0c;第二列数据变化 html部分: <view class"section"><view>多列选择器</view><picker mode"multiSelector" bindchange"bindMultiPickerChange"…

Unity_ShaderGraph示例项目启动

Unity_ShaderGraph示例项目启动 大前提不变:URP模板,Unity2023.1.19使用 Shader Graph - Unity 手册Shader Graph 是一个工具,能够让您直观地构建着色器。您可以在图形框架中创建并连接节点,而不必手写代码。Shader Graph 提供了能反映所作更改的即时反馈,对于不熟悉着色…

flutter抓包绕过

lutter的证书校验 起因&#xff1a; 最近工作上让做个app的复测&#xff0c;把apk发我后&#xff0c;开始尝试挂代理抓包&#xff0c;结果发现抓不到 为是证书没弄好&#xff0c;想着前几天不是刚导入了吗&#xff08;雾&#xff09;。又重新导入了下还是不行。然后各种lsp模…

【TCP】四次挥手(终止连接)

前言 TCP&#xff08;传输控制协议&#xff09;是互联网协议&#xff08;IP&#xff09;中的一种重要传输层协议&#xff0c;用于在通信的计算机之间建立可靠的、有序的和错误校验的数据传输。在TCP连接中&#xff0c;数据传输是双向的&#xff0c;因此需要一种机制来开始和结…

【数据结构】单向链表实现 超详细

目录 一. 单链表的实现 1.准备工作及其注意事项 1.1 先创建三个文件 1.2 注意事项&#xff1a;帮助高效记忆和理解 2.链表的基本功能接口 2.0 创建一个 链表 2.1 链表的打印 3.链表的创建新节点接口 4.链表的节点插入功能接口 4.1 尾插接口 4.2 头插接口 4.3 指定位…

【无标题】yarn报错 “https://registry.npm.taobao.org/...: certificate has expired“如何处理

前言 今天在jenkins打包项目时yarn打包报错&#xff0c;查看log发现npm淘宝镜像报错 原因 在 1 月 22 日&#xff0c;淘宝原镜像域名&#xff08;registry.npm.taobao.org&#xff09;的 HTTPS 证书正式到期。如果想要继续使用&#xff0c;需要将 npm 源切换到新的源&#…

Dockerfile构建Nginx访问说明

Dockerfile使用情况 20210903 Dockerfile ,Nginx 参考地址&#xff1a;https://yeasy.gitbook.io/docker_practice/image/build 编写简单Dockerfile 在一个空白目录中&#xff0c;建立一个文本文件&#xff0c;并命名为 Dockerfile&#xff1a; $ mkdir mynginx $ cd myngin…

跟着cherno手搓游戏引擎【18】抽象Shader、项目小修改

抽象&#xff1a; Shader.h: #pragma once #include <string>namespace YOTO {class Shader {public:virtual~Shader()default;virtual void Bind()const0;virtual void UnBind()const0;static Shader* Create(const std::string& vertexSrc, const std::string&am…

window 安装 jenkins 编写脚本

set JAVA_HOMED:\RuanJianKaiFa\jdk\jdk11 set CLASSPATH.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOMe%\lib\tools.jar; set Path%JAVA_HOME%\bin; java -jar jenkins.war 下载jenkins.war包&#xff0c;编写一个txt文档&#xff0c;把脚本复制进去&#xff0c;修改文件后缀为.bat文件…

MySQL EXPLAIN查询执行计划

EXPLAIN 可用来查看SQL执行计划&#xff0c;常用来分析调试SQL语句&#xff0c;来使SQL语句达到更好的性能。 1 前置知识 在学习EXPLAIN 之前&#xff0c;有些基础知识需要清楚。 1.1 JSON类型 MySQL 5.7及以上版本支持JSON数据类型。可以将数组存为JSON格式的字符串&#…

本体匹配方法概述

目录 前言1 基于术语匹配的方法1.1 字符串匹配1.2 语言方法 2 基于虚拟文档的方法3 基于结构的匹配方法3.1 结构信息利用3.2 Anchor-prompt方法 4 大型本体匹配4.1 本体划分4.2 匹配分块4.3 实体间映射 结语 前言 本文将深入探讨本体匹配的不同方法&#xff0c;从基于术语匹配…

DES加密原理

DES加密算法综合运用了置换、代替、代数等多种密码技术&#xff0c;具有设计精 巧、实现容易、使用方便等特点。DES加密算法的明文、密文和密钥的分组长度 都是64位&#xff0c;详细的DES加密算法结构如图6-10所示。 图6-10 DES加密算法结构图 DES加密过程如下所示&#xff…

2024PMP考试新考纲-【业务环境领域】典型真题和很详细解析(3)

华研荟继续分享【业务环境Business Environment领域】在新考纲下的真题&#xff0c;帮助大家体会和理解新考纲下PMP的考试特点和如何应用所学的知识和常识&#xff08;经验&#xff09;来解题&#xff0c;并且举一反三&#xff0c;一次性3A通过2024年PMP考试。 2024年PMP考试新…