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

news2024/11/16 6:33:37

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

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

<el-table
  style="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.coloradmin.cn/o/1429412.html

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

相关文章

四、Redis之配置文件

redis配置文件的名称 redis.conf 通过命令 find / -name redis.confvim redis.conf通过 : set nu 设置行号: set nonu 取消行号/关键字 搜索关键字: set noh 取消高亮选择4.1 Units 配置大小单位&#xff0c;开头定义了一些基本的度量单位&#xff0c;只支持 bytes&#…

springBoot静态资源文件夹以及文件夹之间的优先级

1、springBoot静态资源文件夹&#xff0c;系统默认路径&#xff0c;优先级由大到小 classpath:/META-INF/resources/ classpath:/resources/ classpath:/static/ classpath:/public/ 比如当static文件夹中和public文件夹中都存在a.html 浏览器访问localhost:8080/a.html将访问…

JS高级(二)-深入对象、内置构造函数、综合案例

文章目录 1.深入对象1.1创建对象的三种方式1.2构造函数1.3实例成员1.4静态成员 2.内置构造函数2.1 Object2.2 Array2.3显示赠品案例2.4包装类型2.4.1 String2.4.2 Number 3.综合案例——购物车展示 1.深入对象 了解面向对象的基础概念&#xff0c;能够利用构造函数创建对象。 1…

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

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

2024美赛数学建模A题思路分析 - 资源可用性和性别比例(2)

# 1 赛题 问题A&#xff1a;资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外&#xff0c;但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1&#xff1a;1&#xff0c;但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。…

基于SSM的健身房会员管理系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的健身房会员管理系统(有报告)。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMvc Mybatis J…

网络原理TCP/IP(1)

文章目录 端口号UDP协议 在网络通信中&#xff0c;协议非常重要 协议进行了分层 应用层就是对应着应用程序&#xff0c;是程序员打交道最多的这一层&#xff0c;调用系统提供的网络api写出来的代码都是属于应用层的 应用层有很多现成的协议&#xff0c;但是更多的还是程序员需要…

【Spark系列6】如何做SQL查询优化和执行计划分析

Apache Spark SQL 使用 Catalyst 优化器来生成逻辑执行计划和物理执行计划。逻辑执行计划描述了逻辑上如何执行查询&#xff0c;而物理执行计划则是 Spark 实际执行的步骤。 一、查询优化 示例 1&#xff1a;过滤提前 未优化的查询 val salesData spark.read.parquet(&quo…

STM32GPIO输入(按键控制LED、光敏电阻控制蜂鸣器实例)

文章目录 一、介绍传感器模块介绍硬件电路c语言数据类型 二、实例按键控制LED接线图代码实现 光敏电阻控制蜂鸣器组装线路代码实现 相关函数解释 一、介绍 传感器模块介绍 硬件电路 上两种按下时为0&#xff0c;下两种按下时为1。 c语言数据类型 现在常用stdint头文件所定…

【Java程序设计】【C00187】基于SSM的旅游资源网站管理系统(论文+PPT)

基于SSM的旅游资源网站管理系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的旅游资源网站 本系统分为前台系统、用户和管理员3个功能模块。 前台系统&#xff1a;当游客打开系统的网址后&#xff0c;首先看到的就是…

一文掌握单基因GSEA富集分析 | gseaGO and gseaKEGG

本期教程 本期教程原文&#xff1a;一文掌握单基因GSEA富集分析 | gseaGO and gseaKEGG 写在前面 关于GSEA分析&#xff0c;我们在前期的教程单基因GSEA富集分析 | 20220404有出过类似的分享。今天&#xff0c;我们也结合相关的资源整理出一篇关于GSEA的教程及出图教程。每个…

mysql 锁知识汇总

目录 一、锁1.1 什么是锁&#xff1f;1.2 全局锁1.2.1 定义1.2.2 应用场景1.2.3 会出现的问题1.2.4 解决方法 1.3 表级锁1.3.1 表锁1.3.2 元数据锁&#xff08;MDL&#xff09;1.3.3 意向锁1.3.4 AUTO-INC锁 1.4 行级锁1.4.1 记录锁(Record Lock)1.4.2 间隙锁(Gap Lock)1.4.3 N…

字符下标计数

下标计数 数组计数&#xff0c;即通过使用一个新的数组&#xff0c;对原来数组里面的项进行计数&#xff0c;统计原来数组中各项出现的次数&#xff0c;如下图所示&#xff1a; 数组计数可以方便快速地统计出一个各项都比较小的数组中&#xff0c;数值相同的数的个数。 数组计数…

PHP集成开发 -- PhpStorm 2023

PhpStorm 2023是一款强大的PHP集成开发环境&#xff08;IDE&#xff09;&#xff0c;旨在提高开发人员的生产力和代码质量。以下是关于PhpStorm 2023软件的详细介绍&#xff1a; 首先&#xff0c;PhpStorm 2023提供了丰富的代码编辑功能&#xff0c;包括语法高亮、自动补全、代…

ubuntu22.04 安装部署01:禁用内核更新

一、前言 ubunut22.04系统安装以后&#xff0c;内核更新会导致各种各样的问题&#xff0c;因此锁定初始安装环境特别重要&#xff0c;下面介绍如何锁定内核更新。 二、操作方法 2.1 查看可用内核 dpkg --list | grep linux-image dpkg --list | grep linux-headers dpkg --…

故障诊断 | 一文解决,CNN-LSTM卷积神经网络-长短期记忆神经网络组合模型的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | 一文解决,CNN-LSTM卷积神经网络-长短期记忆神经网络组合模型的故障诊断(Matlab) 模型描述 CNN-LSTM模型是一种结合了卷积神经网络(Convolutional Neural Network)和长短期记忆神经网络(Long Short-Term Memory)的组合模型,常用于数据故障…

各版本的Qt Creator的下载地址

2024年2月3日&#xff0c;周六上午 Index of /official_releases/qtcreatorhttps://download.qt.io/official_releases/qtcreator/ 如果想下载测试中的最新版Qt Creator的快照可以去这个地址 Index of /snapshots/qtcreatorhttps://download.qt.io/snapshots/qtcreator/

景联文科技受邀出席全国信标委生物特征识别分委会二届五次全会

全国信息技术标准化技术委员会生物特征识别分技术委员会&#xff08;SAC/TC28/SC37&#xff0c;以下简称“分委会”&#xff09;二届五次全会于2024年1月30日在北京顺利召开&#xff0c;会议由分委员秘书长王文峰主持。 分委会由国家标准化管理委员会批准成立&#xff0c;主要负…

git 如何修改仓库地址

问题背景&#xff1a;组内更换大部门之后&#xff0c;代码仓的地址也迁移了&#xff0c;所以原来的git仓库地址失效了。 虽然重新建一个新的文件夹&#xff0c;再把每个项目都git clone一遍也可以。但是有点繁琐&#xff0c;而且有的项目本地还有已经开发一半的代码&#xff0c…

网络异常案例六_IP冲突

问题现象 同一个局域网下&#xff0c;一个路由器带几十台终端设备&#xff0c;存在终端设备获取到了相同IP的场景。该路由器也是DHCP Server。 有两个设备终端&#xff0c;都显示获取到了192.168.11.177这个ip。 抓包分析 抓包过程中&#xff0c;看到的一些问题。 ps&#x…