百变鹏仔-专注前端行业精选
elemtnui 表格如何修改某行文字颜色
作者:鹏仔先生日期:2021-08-12 20:46:11浏览:3330分类: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添加类名
手机扫码访问
猜你还喜欢
- 11-01 vue中实现代码高亮
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
已有3位网友发表了看法:
访客 评论于 [2022-02-28 11:34:42] 回复
好用
头条新闻 评论于 [2021-08-13 23:48:12] 回复
文章不错关注一下
简单的心 评论于 [2021-08-12 20:58:52] 回复
可以用,不错。