How to style summary row in Element-UI Table?

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