element ui table表格根据单元格的值动态设置背景色

效果图：

 

 代码：

<template>
  <div class="custom-tree-container">
    <el-table :data="tableData1" style="width:800px" max-height="320" border :cell-style="cellStyle">
      <el-table-column prop="date" label="序号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="值" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "demo",
    data() {
      return {
        tableData1: [{
          date: '1',
          name: '1025',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2',
          name: '952',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '3',
          name: '1425',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '4',
          name: '3621',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '5',
          name: '857',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '6',
          name: '5151',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '7',
          name: '2234',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    watch: {

    },
    created() {},
    methods: {
      //设置单个单元格样式   行下标：rowIndex    列下标：columnIndex
      cellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex == 1) {
          if (row.name == '1425') {
            return 'background-color:red'
          } else if (parseInt(row.name) > 1000) {
            return 'background-color: green'
          } else {
            return 'background-color: yellow'
          }
        }
      },
    }
  };
</script>