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  否则权重不够样式加不上。