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

前言

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

Element UIElement - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

Element Plus一个 Vue 3 UI 框架 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/

一、示例代码

1.Element UI 示例

（1）/src/views/Example/CellStyle/index_1.vue

<el-table
  border
  size="mini"
  row-key="id"
  highlight-current-row
  :data="feats.list"
  :cell-style="handleChangeCellStyle"
>
  <el-table-column label="评分" width="100" align="center">
    <template slot-scope="scope">
      <el-link type="danger">{{ scope.row.score }}</el-link>
    </template>
  </el-table-column>
</el-table>
 
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 示例

（1）/src/views/Example/CellStyle/index_2.vue

<el-table
  border
  size="small"
  row-key="id"
  highlight-current-row
  :data="feats.list"
  :cell-style="handleChangeCellStyle"
>
  <el-table-column label="评分" width="100" align="center">
    <template slot-scope="scope">
      <el-link type="danger">{{ scope.row.score }}</el-link>
    </template>
  </el-table-column>
</el-table>
 
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
    }
  },
}

三、运行效果