[Vuejs]-How to style summary row in Element-UI Table?

by

0👍

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

Leave a comment