vue3_element_demo1/demo/el-table/views/Table_Demo9.vue

<template>
  <el-table :data="tableData" :row-class-name="rowClassMethod">
    <el-table-column prop="id" label="Id"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="score" label="Score"></el-table-column>
  </el-table>
</template>

<script>

export default {
  name: "Table_Demo9",
  data() {
    return {
      tableData: [
        {
          id: '12987122',
          name: 'Tom',
          score: '99'
        },
        {
          id: '12987123',
          name: 'black',
          score: '81'
        },
        {
          id: '12987124',
          name: 'harry',
          score: '70'
        },
        {
          id: '12987125',
          name: 'Jerry',
          score: '58'
        }
      ]
    }
  },
  methods: {
    rowClassMethod(e) {
      console.log(e);
      const {row} = e;
      let rowClassName = "";
      const score = row.score;
      console.log(score)
      if (score >= 85) {
        console.log(1)
        rowClassName = "excellent"
      } else if (score > 75) {
        console.log(2)
        rowClassName = "good"
      } else if (score > 65) {
        rowClassName = "normal"
      } else {
        rowClassName = "bad"
      }
      return rowClassName
    }
  }
}
</script>

<style scoped>
.el-table :deep(.excellent) {
  background-color: darkorange;
}

.el-table :deep(.good) {
  background-color: cornflowerblue;
}

.el-table :deep(.normal) {
  background-color: aliceblue;
}

.el-table :deep(.bad) {
  background-color: #ff6666;
}
</style>