vue3+elementPlus：el-table-column表格列动态设置单元格颜色

在Vue 3和Element Plus中，可以通过使用el-table-column的cell-style属性来动态设置表格列的颜色。你可以基于你的数据或条件来返回一个样式对象。

下面是一个简单的例子，演示如何根据单元格内容动态改变颜色：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 label="成绩" width="180">
      <template #default="{ row }">
        <span :style="getCellStyle(row.score)">{{ row.score }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2016-05-02', name: '张三', score: 60 },
  { date: '2016-05-04', name: '李四', score: 92 },
  { date: '2016-05-01', name: '王五', score: 70 },
  { date: '2016-05-03', name: '赵六', score: 80 }
]);
 
const getCellStyle = (score) => {
  if (score >= 90) {
    return 'color: green;';
  } else if (score < 90 && score >= 60) {
    return 'color: orange;';
  } else {
    return 'color: red;';
  }
};
</script>

在这个例子中，我们定义了一个getCellStyle函数，它根据成绩值返回不同的颜色。然后在el-table-column中，我们使用#default插槽来自定义单元格内容，并应用getCellStyle函数返回的样式。