TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
element ui table 表格行颜色自定义。单元格颜色 。根据条件改变行或者单元格的颜色
2367
人阅读
2022/6/6 16:56
总访问:
3966810
评论:
0
收藏:
0
手机
分类:
前端
### 行列样式主要是这几个 | 属性名 | 描述 | 回调函数 | | ------------ | ------------ | ------------ | | row-class-name | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | | row-style | 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | | cell-class-name | 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | | cell-style | 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | ### 根据条件改变行的颜色 **如果是要设置每行的样式都一样可以这样绑定一个具体的值:row-style="rowStyle"** ``` <el-table height="666px" :data="courseRowdata" :header-cell-style="headerCellStyle" :row-style="rowStyle" ``` rowStyle直接在data中给固定的值: ``` data() { return { rowStyle: { color: '#fff', height: '39px', background: 'rgba(8, 65, 120, 0.4)', marginBottom: "10px", opacity: "0.8", paddingTop: "10px", paddingBottom: "10px", } } } ``` **根据条件改变某一行的颜色,就需要提供一个方法来返回需要的样式了** ``` <el-table height="666px" :data="teacherRowdata" :header-cell-style="headerCellStyle" :row-style="styleRowStyle" ``` 其中styleRowStyle是一个方法 ``` methods: { styleRowStyle(row) { console.log(row) let rowIndex = row.rowIndex // 默认的行样式 let rowStyle = { color: '#fff', height: '39px', background: 'rgba(8, 65, 120, 0.4)', marginBottom: "10px", opacity: "0.8", paddingTop: "10px", paddingBottom: "10px", } // 排名前三的变绿 if (rowIndex < 3) { rowStyle.background = "green" } // 排名后三不达标的就变红 let teacherDataCount = this.teacherRowdata.length if(rowIndex>=teacherDataCount - 3) { if(row.row.zh_number < 0.8) { rowStyle.background = "#ff5555" } } return rowStyle } } ``` 实现了一个简单的前三行变绿,后三行变红,效果如下: ![](https://img.tnblog.net/arcimg/aojiancc2/76a0778a357c45f385ce37c73fbdd676.png) ### 根据条件改变某一单元格的颜色 和改变行颜色逻辑是一样的,参考代码如下: ``` <el-table :data="rowData" border size="mini" :cell-style="styleBack"> <el-table-column label="row1">11111</el-table-column> <el-table-column property="" label="row2">22222</el-table-column> <el-table-column property="" label="row3">33333</el-table-column> <el-table-column property="" label="row3">44444</el-table-column> <el-table-column property="" label="row3">55555</el-table-column> <el-table-column property="" label="row3">66666</el-table-column> </el-table> ``` 数据: ``` rowData: [ { id: 1, num: 2 }, { id: 2, num: 3 }, { id: 3, num: 4 }, ], ``` 处理方法: ``` styleBack({ row, column, rowIndex, columnIndex }) { if (columnIndex == 1 && row.num > 3) { return { backgroundColor: "#0c87ef" }; }else if(columnIndex == 1){ return { backgroundColor: "#FDD56A" }; } } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}