vue element el-table表格 单元格样式更改

vue element给Table表格单元格数据添加样式

需求：报表统计中 成本总价大于用户总价时成本总价的字体样式为红色

由于是某个单元格的样式变化。选择使用slot-scope实现，代码如下：

<el-table>

    <template slot-scope="{ row }">

      <span :class="statusClass(row.totalPrice,row.userPrice)">{{row.totalPrice }}</span>

    </template>

</el-table-column>

</el-table>

methods: {

  statusClass (totalPrice, userPrice) {

    if (totalPrice > userPrice) {

      return 'addRed'

    }

    return ''

  }

}

.addRed{

  color:red;

}

</style>