需求:计算两数之差,并且在表格中显示,当差大于0,则当前的背景色或字体颜色为绿色,小于0则 显示其他颜色,等于0则正常显示
html
<el-table v-loading="loading" :data="list" highlight-current-row stripe border
:header-cell-style="labelStyle" :cell-style="changeBg" height="580px">
<el-table-column prop="country" width="100" align="center"></el-table-column>
<el-table-column width="100" align="center">
<template slot-scope="{ row }">
{{ row.num1- row.num2}}
</template>
</el-table-column>
<el-table-column prop="num1" label="数据1" min-width="100" align="center"></el-table-column>
<el-table-column prop="num2" label="数据2" min-width="100"
align="center"></el-table-column>
</el-table>
javascript
/* data 部分 */
data() {
return {
labelStyle: { //修改table 头部header样式
fontSize: '24px',
fontWeight: 600,
color: '#585858',
}
}
}
/* methods 函数部分 */
// 改变table字体颜色
changeBg({ row, column, rowIndex, columnIndex }) {
const diff = row.patsanp_patent_num - row.heima_patent_num;
if (diff > 0 && columnIndex === 1) { // columnIndex 代表第几列
return {
color: '#45A321',
fontWeight: 600
}
} else if (diff < 0 && columnIndex === 1) {
return {
color: '#d11a32',
fontWeight: 600
}
} else if (diff == 0 && columnIndex === 1) {
return {
color: '#000',
}
}
else if (columnIndex === 0) {
// 获取第二列的字体颜色
const secondColumnColor = this.changeBg({
row,
column,
rowIndex,
columnIndex: 1
}).color;
return {
color: secondColumnColor,
fontWeight: 600
};
}
}