将表格变为红色,效果如下图
html代码
<template>
<div>
<el-table
:data="tableData"
border
:cell-style="cellStyle"
style="width: 100%; margin-top: 20px">
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3(元)">
</el-table-column>
</el-table>
</div>
</template>
js代码
export default {
name: "Test",
data() {
return {
tableData: [{
name: '王小虎',
amount1: '134',
amount2: '3.2',
amount3: 10
}, {
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
name: '黄晓明',
amount1: '124',
amount2: '1.9',
amount3: 9
}, {
name: '黄晓明',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
name: '小王',
amount1: '139',
amount2: '4.1',
amount3: 15
}, {
name: '小李',
amount1: '139',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
cellStyle({
row, column, rowIndex, columnIndex}) {
let Style1;
let Style2;
//表格框变颜色-数值1
if (row.amount1>300) {
Style1 = 'background: red;color:white';
}else{
Style1 = '';
}
if(columnIndex==1)
return Style1;
//表格框变颜色-数值2
if (row.amount2<3) {
Style2 = 'background: red;color:white';
}else{
Style2 = '';
}
if(columnIndex==2)
return Style2;
}
}
};
第一步:在 el-table 中设置属性 :cell-style=“cellStyle”
第二步:js中写方法cellStyle()通过判断条件将表格变红,通过列来变红