根据值更改 Vue Element UI 表格单元格样式

问题描述

我使用 Element UI。 如何更改 rate 单元格值的颜色？如果 rate

也许表格属性 cell-class-name 可以帮助我？

HTML

<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
        prop="date"
        label="Date"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="Name"
        width="180">
    </el-table-column>
    <el-table-column
        prop="rate"
        label="Rate">
    </el-table-column>
</el-table>

JS

export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-03',name: 'Tom',rate: 1
            },{
                date: '2016-05-02',rate: -1
            },{
                date: '2016-05-04',rate: 22
            },{
                date: '2016-05-01',rate: -22
            }]
        }
    }
}

解决方法

将方法绑定到 cell-class-name 的 <el-table> 属性：

<el-table
  :data="tableData"
  style="width: 100%"
  :cell-class-name="classChecker"
>

定义 classChecker 方法来测试 rate 列并根据值有条件地将类应用于单元格：

methods: {
  classChecker({ row,column }) {
    if (column.property === 'rate') {
      const val = row[column.property];
      if (val > 0 ) {
        return 'greenClass'
      } else {
        return 'redClass'
      }
    }
  }
}

CSS

.greenClass {
  background: green;
}
.redClass {
  background: red;
}

,

使用列模板

<el-table-column prop="rate" label="Rate">
      <template #default="scope">
          <label class="scope.row.rate < 0 ? 'danger' : 'success'">{{scope.row.rate}}</label>
      </template>
 </el-table-column>

Link

编辑：链接