vue elementui el-table表格 点击单元格添加选中样式

注意:
1、点击某行单元格添加选中样式;
2、表格第一列数据单独添加样式,比如:加粗;
3、表格表头添加样式,比如:修改背景色;

先上代码(效果图在文章末尾):

<template><div><el-table size="small"style="width: 100%;"highlight-current-row:header-cell-style="headerCellStyle()":cell-class-name="tableCellClassName"row-key="index"@cell-click="cellclick":cell-style="cellStyle":row-class-name="rowClassName":data="tableData" ><el-table-columnlabel="名称1"prop="name1"align="left"><template slot-scope="scope"><span>{{ scope.row.name1}}</span></template></el-table-column><el-table-columnlabel="名称2"prop="name2"align="center"><template slot-scope="scope"><span>{{ scope.row.name2 || '-'}}</span></template></el-table-column><el-table-columnlabel="名称3"prop="name3"align="center"><template slot-scope="scope"><span>{{ scope.row.name3 || '-'}}</span></template></el-table-column><el-table-columnlabel="名称4"prop="name4"align="center"><template slot-scope="scope"><span>{{ scope.row.name4 || '-'}}</span></template></el-table-column></el-table></div>
</template><script>
export default {name: '',components: {},props: {},data () {return {tableData: [{name1: '上海',name2: 'bbb',name3: 'ccc',name4: 'ddd',},{name1: '广州',name2: 'bb',name3: 'cc',name4: 'dd',},{name1: '厦门',name2: 'b',name3: 'c',name4: 'd',},{name1: '北京',name2: 'bbbb',name3: 'cccc',name4: 'dddd',}],cellClickRow:'',cellClickColumn: '',}},created () {},mounted () {},computed: {},watch: {},methods: {// 表头样式headerCellStyle () {return {color: " #333 !important", backgroundColor: "#cedff3  !important",fontSize: '14px',fontWeight: 500,}},rowClassName ({row,rowIndex}) {// 点击时 添加小手样式if (rowIndex === 2) {return 'addPointer'}},tableCellClassName ({row,column,rowIndex,columnIndex}) {// 给行列索引赋值row.index = rowIndexcolumn.index = columnIndexif (columnIndex === 0) {return 'columnFirstStyle'} else {return 'columnOtherStyle'}},cellclick (row, column, cell,event) {let clickRanking = '' // 当前点击数据for(let i in row) {if (i === column.property) {clickRanking = row[i]}}// 点击厦门行:点击的厦门数据不为空 且 '厦门' 标题不可点击if (row.name1 === '厦门' && clickRanking && clickRanking !=='厦门') {this.cellClickRow = row.indexthis.cellClickColumn = column.index}},cellStyle ({row, column, rowIndex, columnIndex}) {if (row.name1 === '厦门') {// 给所点击的 单元格添加样式if (row.index === this.cellClickRow && column.index === this.cellClickColumn) {return "border:1px solid #409eff; color:#2C89E5;font-weight: 700;"} else {return ''}}},},
}
</script><style lang="scss" scoped>
::v-deep .columnFirstStyle{font-weight: 700;font-size: 14px;color: black;
}
::v-deep .columnOtherStyle{font-size: 14px;
}
::v-deep .addPointer{cursor: pointer;
}</style>

展示效果图:
在这里插入图片描述

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

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

相关文章

python-pytorch 如何使用python库Netron查看模型结构(以pytorch官网模型为例)0.9.2

Netron查看模型结构 参照模型安装Netron写netron代码运行查看结果需要关注的地方 2024年4月27日14:32:30----0.9.2 参照模型 以pytorch官网的tutorial为观察对象&#xff0c;链接是https://pytorch.org/tutorials/intermediate/char_rnn_classification_tutorial.html 模型代…

Ansible自动化

Ansible自动化 自动化的需求&#xff1a; 1. 在什么样的场景下需要自动化&#xff1f; 批量化的工作&#xff1a; 装软件包、配置服务、升级、下发文件… 2. 为什么在自动化工具中选择ansible&#xff1f; 对比shell脚本&#xff1a; 相对于用shell的脚本来实现自动化&#x…

42.接雨水

接雨水是一个非常经典的题目了,我在二刷的时候,终于能独立做了,在记录一下灵神的横着计算的单调栈思想. 法一: 竖着计算 奇思妙想 让我们想想,接到的雨水到底是存储哪里了呢,其实他就是凹陷部分,而什么是凹陷呢,就是从左边看,从右边看都发现不了的地方. …

滑块验证码破解----Java使用opencv后端破解滑块验证

使用技术:Java SpringBootopenCV 在windows上首先需要下载opencv进行安装,先去官网:Releases - OpenCV 下载这个windows版本的安装包 下载后直接安装解压就行,然后需要,然后找到安装位置里的这个文件: 你下载的是什么版本的,这里的数字就是多少,比如我下载4.5.3版本那么这…

永磁同步电机SMO负载转矩观测matlab模型。

永磁同步电机SMO负载转矩观测matlab模型。 负载转矩的有效识别是提高伺服驱动系统抗负载扰动性能的关键之一。现在的传统结构的LTID滑模观测器存在频率抖动大&#xff0c;估计精度差的缺点&#xff0c;限制了其在高性能伺服系统中的应用。 本模型推导分析了传统LTID滑模观测器…

eclipse 如何创建python文件

一、准备 1.平台要求&#xff1a; 电脑除了要安装eclipse软件和Python语言包之外&#xff0c;还需要将Python集成到eclipse软件中&#xff0c;网上有很多的方法&#xff0c;这里就不细细介绍如何集成了。 在下面界面中可以看到自己已经安装了继承插件。具体方法见步骤2&…

AI新篇章:全面解读ChatGPT3.5与GPT4.0的革命性融合

MidTool&#xff08;kk.zlrxjh.top&#xff09;&#xff0c;一个集成了多种先进人工智能技术的助手&#xff0c;融合了ChatGPT3.5、GPT4.0、DALLE 3和Midjourney等多个智能服务&#xff0c;提供多功能体验。下面是对这些技术的简要概述&#xff1a; **ChatGPT3.5**&#xff1a;…

可视化智慧工厂

在科技迅猛发展的今天&#xff0c;制造业正迎来一场深刻的变革——智慧工厂的崛起。可视化智慧工厂作为其中的重要一环&#xff0c;以其直观、高效、智能的特点&#xff0c;正成为制造业转型升级的关键所在。 一、什么是可视化智慧工厂? 传统的制造业生产方式往往依赖于人工…

Typora配置PicGo图床,将图片文件上传到gitee厂库,获取图片链接显示在md文件中

Typora配置PicGo图床&#xff0c;将图片文件上传到gitee厂库&#xff0c;获取图片链接显示在md文件中 创建Gitee创库和配置私人令牌 名字、路径、描述自己随便添&#xff0c;但是必须开源&#xff0c;链接才能可以访问&#xff1a; 进入偏好设置 > 图像 > 选择PicGo-Cor…

找不到mfc140u.dll文件如何处理?这三种方法帮你快速修复mfc140u.dll

当你的电脑出现提示&#xff0c;显示找不到mfc140u.dll文件&#xff0c;从而无法继续执行代码&#xff0c;你需要知道如何应对这种情况。今天我们就来详细说明如何解决mfc140u.dll文件丢失的问题&#xff0c;并对该文件进行详细分析。这个文件是Microsoft Visual Studio的一个重…

Windows 安全中心:页面不可用 你的 IT 管理员已限制对此应用的某些区域的访问,并且你尝试访问的项目不可用。有关详细信息,请与 IT 支持人员联系。

问题 1&#xff1a;Windows 安全中心提示&#xff1a;【页面不可用 你的 IT 管理员已限制对此应用的某些区域的访问&#xff0c;并且你尝试访问的项目不可用。有关详细信息&#xff0c;请与 IT 支持人员联系。】 修复 Microsoft.SecHealthUI 方法 1&#xff1a;命令自动重装安…

Docker 部署与操作

一 国内&#xff1a; 中国电信天翼云 提供包括云主机在内的全方位云计算服务&#xff0c;侧重于安全合规和企业级服务。 利用电信的网络优势&#xff0c;提供稳定可靠的基础设施服务。 中国联通沃云 提供包括云主机在内的多项云计算服务&#xff0c;适合不同行业和场景。 …

【Spring Security系列】Spring Security整合JWT:构建安全的Web应用

前言 在企业级开发或者我们自己的课程设计中&#xff0c;确保用户数据的安全性和访问控制非常重要。而Spring Security和JWT是都两个强大的工具&#xff0c;它俩结合可以帮助我们实现这一目标。 Spring Security提供了全面的安全功能&#xff0c;而JWT则是一种用于身份验证的…

小程序为什么必须安装SSL证书?怎么挑选?——建议收藏

小程序使用SSL证书的原因主要包括&#xff1a; 1. 安全要求&#xff1a;微信小程序等平台强制要求使用HTTPS加密协议&#xff0c;这意味着必须部署SSL证书以确保所有网络请求的安全性。没有SSL证书&#xff0c;小程序无法正常上线使用。 2. 数据加密&#xff1a;SSL证书通过加密…

51单片机入门(一)

1. 51单片机的基础介绍 2. RAM和ROM的区别 总体而言&#xff0c;RAM和ROM在计算机系统中起着不同的角色&#xff0c;RAM用于临时存储运行时数据&#xff0c;而ROM用于存储永久性的固件和系统程序。 3. 为什么叫51单片机 因为51系列单片机都是使用Intel 8031指令系统的单片机…

linux网络编程启动!(开端)

网络设计模式 &#xff1a;就两种模型 b/s 模型 : 浏览器—>服务器 优点是&#xff1a;跨平台。开发成本低 缺点是&#xff1a;网络通信的时候必须要使用http/https协议 http协议 是个应用层协议 不能在磁盘缓存或者从磁盘加载大量数据 http 与https 多了一层加密 c/s模型 …

C# Solidworks二次开发:访问平面、曲面相关API详解

大家好&#xff0c;今天要介绍的是关于平面、曲面相关的API。 下面是相关的API: &#xff08;1&#xff09;第一个为ISurfacePlanarFeatureData&#xff0c;这个API的含义为允许访问平面表面特征&#xff0c;下面是官方的具体解释&#xff1a; 下面是官方使用的例子&#xff…

美国站群服务器的配置选择要点?

美国站群服务器的配置选择要点? 随着互联网的快速发展&#xff0c;站群已经成为许多网站主和企业选择的一种有效的网络推广方式。而在搭建站群时&#xff0c;选择适合的服务器配置是至关重要的。美国作为全球互联网技术的先锋之一&#xff0c;拥有先进的服务器设施和强大的网…

【 书生·浦语大模型实战营】作业(四):XTuner 微调 LLM:1.8B、多模态、Agent

【 书生浦语大模型实战营】作业&#xff08;五&#xff09;&#xff1a;LMDeploy 量化部署 &#x1f389;AI学习星球推荐&#xff1a; GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系…

Linux——(关于权限常见的3个问题)

文章目录 1.修改文件或者目录的拥有者和所属组1.1chown指令1.2chgrp指令 2.常见的权限三个问题2.1对应一个目录&#xff0c;如果要进入&#xff0c;需要什么权限&#xff1f;2.2为什么我们创建的文件默认权限不是7772.2.1关于Linux下的权限掩码 2.3文件能否被删除取决于什么2.3…