Element UI & Element Plus之改变表格单元格颜色

首先官网文档中有 Table 表格 组件的属性说明，只需要在el-table标签中加上:cell-style="xxx"，以及实现该方法即可。Element UI框架和Element Plus框架在使用上有一点点区别，因此记录一下下。

Element UI：Element - The world's most popular Vue UI framework

Element Plus：一个 Vue 3 UI 框架 | Element Plus

1、Element UI框架的示例

  
    
  

 
methods: {
  /**
   * 改变表格单元格颜色
   */
  handleChangeCellStyle({row, column, rowIndex, columnIndex}) {
    let cellStyle
    if (row.score > 9) {
      cellStyle = 'background-color: #ffdcdc'
    }
    else if (row.score > 7) {
      cellStyle = 'background-color: #fde2c2'
    }
    else {
      cellStyle = 'background-color: #fff'
    }

    if(column.label === '评分') {
      return cellStyle
    }
  },
}

2、Element Plus框架的示例

  
    
  

 
methods: {
  /**
   * 改变表格单元格颜色
   */
  handleChangeCellStyle({row, column, rowIndex, columnIndex}) {
    let cellStyle = {}
    if (row.score > 9) {
      cellStyle.backgroundColor = '#ffdcdc'
    }
    else if (row.score > 7) {
      cellStyle.backgroundColor = '#fde2c2'
    }
    else {
      cellStyle.backgroundColor = '#fff'
    }

    if(column.label === '评分') {
      return cellStyle
    }
  },
}

3、效果如下~