vue3中 a-table设置某一个单元格的背景颜色

需求：根据某一个单元格中的某个条件不同，设置动态的颜色；

思路：通过官方文档提供的customCell进行判断设置不同的颜色背景，案例中进行了简单的行列判断，同学们可以根据自己的需求修改判断条件，动态实现不同的单元格背景颜色的变化；

效果图：

测试案例：

<template>
  <a-table :columns="columns" :dataSource="data" rowKey="id" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref([
  { id: 1, name: "John Doe", score: 85, age: 28 },
  { id: 2, name: "Jane Smith", score: 92, age: 32 },
  { id: 3, name: "Alice Johnson", score: 60, age: 23 },
]);

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    customCell: (record, rowIndex) => {
      // 为第二行的 "Name" 列设置背景颜色
      if (rowIndex === 1) {
        return { style: { backgroundColor: "lightblue" } };
      }
      return {};
    },
  },
  {
    title: "Score",
    dataIndex: "score",
    key: "score",
    customCell: (record, rowIndex) => {
      // 为第一行的 "Score" 列设置背景颜色
      if (rowIndex === 0) {
        return { style: { backgroundColor: "lightgreen" } };
      }
      return {};
    },
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    customCell: (record, rowIndex) => {
      // 为第三行的 "Age" 列设置背景颜色
      if (rowIndex === 2) {
        return { style: { backgroundColor: "lightcoral" } };
      }
      return {};
    },
  },
];
</script>