专注前端行业精选
elemtnui 表格如何修改某行文字颜色
作者:鹏仔先生日期:2021-08-12 20:46:11浏览:2127分类:JavaScript
项目中用到了elementui的表格,今天开会突然说要需要欠费的用户的一行文字为红色,那么安排一下。
如上图所示
首先,我们在el-table标签中加入 :row-class-name="tableAddClass" ,双引号自定定义命名。
<el-table :data="tableData" :row-class-name="tableAddClass"></el-table>
接着在methods中写入下放代码
tableAddClass({row,rowIndex}) { if (row.studentno == '1996') { return 'tr-red'; } return ''; }
row是当前行的数据,你可以获取row下任意字段进行判断,举个例子,我通过字段 studentno 判断学号为 1996 的学生添加类名 “tr-red”,根据自己的需求去判断(您可以根据自己的需求判断多个,定义多个css样式,你开心就好)。
rowIndex为当前行的索引。
最后,我们需要在CSS中定义颜色样式
<style scoped> /deep/.el-table .tr-red { color: red !important; } </style>
- 上一篇:vue中调用百度地图 获取经纬度
- 下一篇:vue给单独组建的body添加类名
猜你还喜欢
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 09-26 vue给单独组建的body添加类名
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有3位网友发表了看法:
访客 评论于 [2022-02-28 11:34:42] 回复
好用
头条新闻 评论于 [2021-08-13 23:48:12] 回复
文章不错关注一下
简单的心 评论于 [2021-08-12 20:58:52] 回复
可以用,不错。