如何设置元素界面表中汇总行的样式

Question

我使用:cell-class-name根据值在表格单元格中用红色或蓝色表示数字。它在表格和正文中都很好，但我也希望在摘要行中有同样的效果。有办法做到这一点吗？

<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

我之前也有同样的需求，我的理解是他们没有这个功能，所以你必须自己实现它。我是这样做的：

代码笔：https://codepen.io/rugia/pen/ZEajGqg

基本上它所做的是在每次tabledata更新时在目标列的sum单元格上添加颜色类。

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()
}
} 
}