数据列表中总价大于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 否则权重不够样式加不上。