VUE element-ui之table表格内容样式（颜色）修改

赫兹/Herzz

于 2021-06-17 11:22:30 发布

阅读量2.8k

点赞数 4

本文链接：https://blog.csdn.net/HanXiaoXi_yeal/article/details/117986143

版权

web前端同时被 3 个专栏收录

73 篇文章

订阅专栏

vue

61 篇文章

订阅专栏

elementui

49 篇文章

订阅专栏

本文介绍了一种在表格中将负数显示为红色的方法。通过定义样式方法并结合JavaScript进行判断，当列名为“销售金额环比(%)”且内容为负数时，将该单元格的颜色设置为红色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求将表格中的负数显示为红色

实现步骤：
定义样式方法

<el-table
      id="tabs"
      v-loading="loading"
      :data="tableData"
      height="580"
      border
      style="width: 100%"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      :cell-style="cellStyle"     样式方法
    >

利用方法传递参数进行js判断

cellStyle(row) {注意：这里需要进行双重判断（逻辑与），列名与列内容需同时满足条件。
      if (row.column.label === '销售金额环比(%)' && row.row.priceChainRatio< 0) {
        return 'color:#FF0000'
      }
    }