实现修改el-table表格中的字体或背景颜色

需求:计算两数之差,并且在表格中显示,当差大于0,则当前的背景色或字体颜色为绿色,小于0则 显示其他颜色,等于0则正常显示

html 复制代码
<el-table v-loading="loading" :data="list" highlight-current-row stripe border
 :header-cell-style="labelStyle" :cell-style="changeBg" height="580px">
    <el-table-column prop="country" width="100" align="center"></el-table-column>
    <el-table-column width="100" align="center">
        <template slot-scope="{ row }">
            {{ row.num1- row.num2}}
        </template>
    </el-table-column>
    <el-table-column prop="num1" label="数据1" min-width="100" align="center"></el-table-column>
    <el-table-column prop="num2" label="数据2" min-width="100"
                        align="center"></el-table-column>
</el-table>
javascript 复制代码
/* data 部分 */
data() {
    return {
        labelStyle: {   //修改table 头部header样式
            fontSize: '24px',
            fontWeight: 600,
            color: '#585858',
        }
    }
}

/* methods 函数部分 */

// 改变table字体颜色
changeBg({ row, column, rowIndex, columnIndex }) {
            const diff = row.patsanp_patent_num - row.heima_patent_num;
            if (diff > 0 && columnIndex === 1) { // columnIndex 代表第几列
                return {
                    color: '#45A321',
                    fontWeight: 600
                }
            } else if (diff < 0 && columnIndex === 1) {
                return {
                    color: '#d11a32',
                    fontWeight: 600
                }
            } else if (diff == 0 && columnIndex === 1) {
                return {
                    color: '#000',
                }
            }
            else if (columnIndex === 0) {
                // 获取第二列的字体颜色
                const secondColumnColor = this.changeBg({
                    row,
                    column,
                    rowIndex,
                    columnIndex: 1
                }).color;
                return {
                    color: secondColumnColor,
                    fontWeight: 600
                };
            }
}
相关推荐
未来之窗软件服务1 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
baidu_247438611 小时前
Android ViewModel定时任务
android·开发语言·javascript
VT.馒头1 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
有位神秘人2 小时前
Android中Notification的使用详解
android·java·javascript
phltxy2 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07073 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js
Mr Xu_4 小时前
告别硬编码:前端项目中配置驱动的实战优化指南
前端·javascript·数据结构
Byron07075 小时前
从 0 到 1 搭建 Vue 前端工程化体系:提效、提质、降本实战落地
前端·javascript·vue.js
zhengfei6115 小时前
【AI平台】- 基于大模型的知识库与知识图谱智能体开发平台
vue.js·语言模型·langchain·知识图谱·多分类
徐小夕@趣谈前端5 小时前
Web文档的“Office时刻“:jitword共建版2.0发布!让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6