vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题

今天写了一些代码，是有关合同审核成功之后，整条数据显示绿色，针对已经作废的数据整条显示红色。以下是解决方案。

1 在表格头添加。:cell-style="tableRowClassName"

<el-table  :cell-style="tableRowClassName"></<el-table>

2 在methods中添加如下代码：

 //已签订的合同，这一行蓝色字体显示，已作废的合同这一行红色字体显示tableRowClassName({row}){return row.contractStatus=='3'?'color: green;':(row.baseinfoContractstatus=='5'?'color: red;':"")},

好啦，完成啦！

有关颜色的判断可以自己针对具体的业务字段进行判断显示什么颜色。

vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据 <el-table max-he ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
相关技巧,详见注释 <template><div class="container"><h2>{{ mu ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题

今天写了一些代码，是有关合同审核成功之后，整条数据显示绿色，针对已经作废的数据整条显示红色。以下是解决方案。

vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题相关推荐

最新文章

热门文章