码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 实现修改el-table表格中的字体或背景颜色


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

    1. <el-table v-loading="loading" :data="list" highlight-current-row stripe border
    2. :header-cell-style="labelStyle" :cell-style="changeBg" height="580px">
    3. <el-table-column prop="country" width="100" align="center">el-table-column>
    4. <el-table-column width="100" align="center">
    5. <template slot-scope="{ row }">
    6. {{ row.num1- row.num2}}
    7. template>
    8. el-table-column>
    9. <el-table-column prop="num1" label="数据1" min-width="100" align="center">el-table-column>
    10. <el-table-column prop="num2" label="数据2" min-width="100"
    11. align="center">el-table-column>
    12. el-table>
    1. /* data 部分 */
    2. data() {
    3. return {
    4. labelStyle: { //修改table 头部header样式
    5. fontSize: '24px',
    6. fontWeight: 600,
    7. color: '#585858',
    8. }
    9. }
    10. }
    11. /* methods 函数部分 */
    12. // 改变table字体颜色
    13. changeBg({ row, column, rowIndex, columnIndex }) {
    14. const diff = row.patsanp_patent_num - row.heima_patent_num;
    15. if (diff > 0 && columnIndex === 1) { // columnIndex 代表第几列
    16. return {
    17. color: '#45A321',
    18. fontWeight: 600
    19. }
    20. } else if (diff < 0 && columnIndex === 1) {
    21. return {
    22. color: '#d11a32',
    23. fontWeight: 600
    24. }
    25. } else if (diff == 0 && columnIndex === 1) {
    26. return {
    27. color: '#000',
    28. }
    29. }
    30. else if (columnIndex === 0) {
    31. // 获取第二列的字体颜色
    32. const secondColumnColor = this.changeBg({
    33. row,
    34. column,
    35. rowIndex,
    36. columnIndex: 1
    37. }).color;
    38. return {
    39. color: secondColumnColor,
    40. fontWeight: 600
    41. };
    42. }
    43. }

  • 相关阅读:
    解决方案 | 法大大电子签加速高校七大场景全面实现数字化
    Linux:I/O 5种模型
    安全渗透测试基础之-Nessus漏洞扫描工具(安装下载)
    maptalks三维地图网址
    jedis:使用事务开启watch监控
    在VScode中使用Jupyter Notebook的一些技巧
    重识Nginx - 01 Nginx 主要应用场景及版本概述
    强化学习 | Python强化学习
    Codasip携手西门子共同为定制处理器提供追踪解决方案
    开发者实践|如何实现云开发场景联动(内附结构图和教学视频)
  • 原文地址:https://blog.csdn.net/qq_54847700/article/details/136368543
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号