【前端】elementUI表格根据状态显示不同的字体颜色

简介: 【前端】elementUI表格根据状态显示不同的字体颜色

elementUI表格根据状态显示不同的字体颜色

elementUI 官网https://element.eleme.cn/#/zh-CN

cell-style:单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

实现效果:

实现步骤:

el-table标签中增加一个方法回调,:cell-style=“cellStyle”。

在方法中添加:

// 表格中单元格的字体颜色设置
/***
 * row为某一行的除操作外的全部数据
 * column为某一列的属性
 * rowIndex为某一行(从0开始数起)
 * columnIndex为某一列(从0开始数起)
 */
cellStyle({ row, column, rowIndex, columnIndex }) {
    // 根据状态列显示字体颜色
    if (row.isSync === 0) {
        return "color: #0CB618";
    } else {
        return "";
    }
},

本文完结!


相关文章
|
7月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
81 1
|
7月前
|
前端开发 JavaScript 微服务
jeecg-boot前端实现表格插槽、定制化修改
jeecg-boot前端实现表格插槽、定制化修改
|
7月前
|
存储 前端开发
web前端开发----------表格
web前端开发----------表格
161 0
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
3月前
|
前端开发
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
81 1
前端引入字体文件
|
5月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
218 6
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
64 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
72 28
|
2月前
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
195 0
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`<ul>`嵌套`<li>`)、有序列表(`<ol>`嵌套`<li>`)和定义列表(`<dl>`嵌套`<dt>`和`<dd>`)。
70 19
下一篇
DataWorks