百变鹏仔-专注前端行业精选
elemtnui 表格如何修改某行文字颜色
作者:鹏仔先生日期:2021-08-12 20:46:11浏览:2436分类: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添加类名
手机扫码访问
猜你还喜欢
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
- 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调用地图,进行位置查询,标记定位
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有3位网友发表了看法:
访客 评论于 [2022-02-28 11:34:42] 回复
好用
头条新闻 评论于 [2021-08-13 23:48:12] 回复
文章不错关注一下
简单的心 评论于 [2021-08-12 20:58:52] 回复
可以用,不错。