el-table修改字体颜色（包括行高亮时）和动态设置行背景色

已于 2023-07-26 16:51:04 修改
阅读量6.5k 收藏 3
点赞数
文章标签： vue.js 前端 javascript
于 2023-05-18 10:44:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gjylalaland/article/details/130741597
版权
文章讲述了在使用组件时遇到的行样式和单元格样式设置不生效的问题。通过使用cell-class-name方法定位并成功设置字体颜色，同时调整了高亮状态下的颜色。此外，还介绍了如何动态改变行的背景色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

发现问题：

1、使用组件自带的行方法row-style或者单元格方法cell-style设置字体颜色，发现设置不生效

2、控制台查看元素，发现cell-style定位不到真正的字体位置，而是上面一层

解决问题：

3、使用组件自带单元格方法cell-class-name来设置一个class到外面这层元素中，来方便明确定位，最终定位在这个class的cell中

 

 到这里字体颜色就设置成功了

4、因为我把字体设置成了白色，发现组件自带的行高亮时字体颜色和背景色太过相近，决定修改高亮时的颜色，元素中查看发现组件高亮时添加了hover-row的class

 所以就这样写

设置成功

 补充：行的背景色改为动态红色，这里用el-table自带的属性cell-style就可以了，以下是methiods里面调用的函数

Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
王二红
02-19 6881
vue3，elementplus，el-table，table表格，取消表格行row移入高亮效果，elementplus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
Vue3 - Arco Design Vue 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（改变鼠标移入时的背景色）
王二红
06-30 2938
vue3，arcodesignvue，arcodesign，表格，a-table，hover，表格hover的class类名是什么，class，hover，在arcodesignvue项目中，表格组件如何去掉鼠标移入时的hover效果，vue3arco.design表格组件修改鼠标移入行的背景颜色，table表格，取消表格行row移入高亮效果，去掉鼠标移入行时的hover效果，取消a-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消arco表
el-table修改表格颜色
weixin_49114503的博客
02-28 3226
el-table修改表格颜色
element ui el-table 动态改变 单元格 的颜色.txt
11-11
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
ElementPlus 中自定义 el-table 设置背景透明和字体颜色
最新发布
虎康的博客
04-16 481
如下效果，要求自定义 el-table 设置背景透明和字体颜色。
vue+element ui 改变表格el-table中字体的颜色，改变el-table中某一列的样式
weixin_52278161的博客
05-08 2326
把要改变样式的列的 el-table-column 使用 slot-scope 并用 span 标签设置 style 就可以了，注意需要结合{{ scope.row.date }}使用，这样表格的 date 列就变为红色且加粗了。菜鸟仅仅只是做个笔记，如果我有哪里说错的请大家批评指正，如果有更好的方法也欢迎大家安利！属性来为表格中的每一行添加自定义的类名，然后在 CSS 中为这个类名设置字体颜色，但是没有成功。我有尝试过使用 Element UI 提供的。当然你也可以根据自己的需要改一些别的样式。
Element ui 丨修改el-table 表头的背景色、字号及文字颜色
weixin_39142106的博客
05-23 7198
Element ui 丨修改el-table 表头的背景色、字号及文字颜色
实现修改el-table表格中的字体或背景颜色
甄_的博客
02-29 2935
需求：计算两数之差，并且在表格中显示，当差大于0，则当前的背景色或字体颜色为绿色，小于0则 显示其他颜色，等于0则正常显示。
el-table设置单元格里的字体颜色
weixin_43258184的博客
04-13 9578
例如图中，设置某个单元格的字体颜色： ① el-table标签上添加属性：:cell-style=“cellStyle” <el-table :data="tableData" :cell-style="cellStyle" border stripe fit> ②vue文件里在method里声明 cellStyle方法 cellStyle({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || c
Element Table的row-class-name无效与动态高亮显示选中行背景色
10-17
以上就是关于Element Table的row-class-name属性无效以及如何动态高亮显示选中行背景色的知识点介绍。通过对官方文档的深入理解以及实践中的问题解决，可以有效地利用Element UI提供的功能来实现用户界面的优化。...
javascript实现table选中的行以指定颜色高亮显示的方法
10-24
在进行web页面开发时，经常需要对表格行进行交互操作，其中比较常见的需求是选中某一行并以特定颜色高亮显示，以便用户能清楚地知道当前选中的项。本文主要介绍使用JavaScript来实现这一功能的技术方法。通过具体...
Vue中el-table修改单独列的字体颜色、样式，用cell-style写函数
z707960209的博客
11-29 5893
【代码】Vue中el-table修改单独列的字体颜色、样式，用cell-style写函数。
el-table获取数据&改变字体颜色
qq_39450223的博客
10-27 358
利用插槽
vue element el-table单元格字体颜色变更
yuhuamei的博客
02-15 3070
vue element el-table单元格字体颜色变更
el-table-column根据条件修改字体颜色，el-table-column序号展示
qq_39695210的博客
01-29 3765
el-table-column根据条件修改字体颜色，el-table-column序号展示
element-ui动态更改el-table某个单元格字体颜色
热门推荐
agua001的博客
08-12 2万+
处于某种原因，有时候一个表格里很多种样式，比如单元格动态改变字体颜色 如UI图 html: 通过:cell-style="cellStyle" 方法返回一个回调，具体参数看文档 <el-table :data="tableData" style="width: 100%" :header-cell-style="{color: '#848484', fontSize: '14px'}" :cell-style="cellStyle" :default-sort = "{prop: 'dat
el-table表头修改文字或者背景颜色，通过header-row-style设置样式
weixin_43923808的博客
06-15 4260
【代码】el-table表头修改文字或者背景颜色，通过header-row-style设置样式。
el-table改变表头背景颜色和字体样式
weixin_44209077的博客
01-06 2550
【代码】el-table改变表头背景颜色和字体样式。
el-table的一些实操用法
wechatonly的博客
08-22 1880
实测几种设置el-table背景颜色，字体颜色，边框的方法和思路
el-table设置某一行高亮
02-18
### 使用Element UI的`el-table`组件设置指定行高亮 为了实现在`el-table`中点击某一行使其高亮的效果，可以利用Vue的数据绑定特性来动态控制每一行的类名。具体来说，在表格配置项中定义一个方法用于返回当前行是否应该应用特定的CSS类[^2]。 #### 定义数据模型 首先，在Vue实例内声明两个变量：一个是用来存储选中行的信息；另一个作为判断依据决定哪一行应当被标记为已选状态。 ```javascript data() { return { selectedRow: null, // other data properties... }; } ``` #### 自定义row-class-name属性 接着通过自定义`rowClassName`函数来实现基于条件逻辑向目标行添加额外样式： ```html <template> <div> <el-table :data="tableData" @row-click="handleRowClick" :row-class-name="tableRowClassName"> <!-- column definitions --> </el-table> </div> </template> <script> export default { methods: { handleRowClick(row) { this.selectedRow = row; }, tableRowClassName({ row }) { if (this.selectedRow === row) { return 'highlight'; } return ''; } } }; </script> ``` 上述代码片段展示了如何监听行点击事件(`@row-click`)并将所选项保存至`selectedRow`变量中。每当用户单击任意一行时都会触发此操作更新视图上的高亮显示。 #### 添加样式规则 最后一步是在全局或局部范围内引入新的`.highlight` CSS 类型以改变视觉表现形式: ```css <style scoped> .highlight { background-color: #f0f9eb !important; /* 可根据需求调整 */ } /* 如果还需要取消默认hover效果可参照如下做法 */ :deep(.el-table__body tr:hover>td){ background-color: inherit!important; } </style> ``` 这里设置了当某一行处于激活状态下其背景色会发生变化，并且禁用了原有的悬浮提示框颜色覆盖行为以便更好地突出选定区域[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值