How to style summary row in Element-UI Table? - vue.js

Question

I'm making the numbers in red or blue in table cells according to the value using :cell-class-name. It works fine in the table, body but I also want to have the same effect in the summary row. Is there any way to do that?
<template>
<el-table
:data="products"
style="width: 90%"
show-summary
:header-cell-style="{
'background-color': '#f7f7f7',
color: '#6e6e6e',
'font-weight': '400',
'text-align': 'end',
}"
:cell-class-name="classChecker" >
<el-table-column width="50" prop="profit" align="center"> </el-table-column>
<el-table-column width="50" prop="cost" align="center"> </el-table-column>
<el-table-column width="50" prop="price" align="center"> </el-table-column>
</template>
methods: {
classChecker({ row, column }) {
const val = row[column.property];
if (val > 0) {
return "blueClass";
} else {
return "redClass";
}
}
}
<style>
.blueClass {
color: #0090ff;
}
.redClass {
color: red;
}
</style>

Answer 1

I had the same requirement a while back, my understanding is that they don't have this feature, so you'll have to implement it yourself.
Here's how I did it:
codepen: https://codepen.io/rugia/pen/ZEajGqg
basically what it does is to add color class on target columns' sum cell every time tabledata updates.
methods: {
async applyFooterColor () {
await this.$nextTick()
const table = this.$refs.table
const cols = ['amount1', 'amount2']
table.columns.forEach(col => {
const cells = document.getElementsByClassName(col.id)
const cell = cells[cells.length - 1].children[0]
if (cols.includes(col.property)) {
const val = +cell.textContent
if (+val !== 0) {
const color = val > 0 ? 'blue' : 'red'
cell.classList.add(color)
return
}
}
cell.classList.remove('red', 'blue')
})
}
},
watch: {
tableData: {
immediate: true,
handler: function() {
this.applyFooterColor()
}
}
}