el-table给某一行加背景色

数据列表中总价大于100的一行背景色为红色，效果图如下：

代码示例：

<template><div id="app"><!-- 测试区域！！！！！！！！！！！！！！！！！ --><el-table :data="tableData" style="width: 50%" :row-class-name="tableRowClassName"><el-table-column prop="name" label="物品" width="180" /><el-table-column prop="danjia" label="单价" width="100" /><el-table-column label="数量" align="center" prop="num" /><el-table-column label="总价" align="center" prop="zongjia" /></el-table> <!-- 测试区域结束！！！！！！！！！！！！！！！ --></div>
</template>
<script>export default {name: '',data(){return{tableData:[{id:1,name:"物品1",danjia: 10,num: 1,zongjia:10},{id:2,name:"物品2",danjia: 50,num: 5,zongjia:250},{id:3,name:"物品3",danjia: 30,num: 3,zongjia:90},],}},methods:{//指定行颜色tableRowClassName: function({ row, rowIndex }) {console.log(row, 'row');console.log("rowIndex",rowIndex);if (row.zongjia>100) {return 'rowbg';}}},mounted(){}
}
</script><style>
.rowbg{background: pink!important;
}
</style>

注意：加的样式里面后边要加上 !important  否则权重不够样式加不上。