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

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

实现步骤:
定义样式方法

<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'
      }
    }

效果如图
VUE element-ui之table表格内容样式(颜色)修改_第1张图片
此方法简单易懂其他样式修改可自行测试

你可能感兴趣的:(web前端,elementui,vue,vue,前端,elementui)