Ant Design-Vue3 表格自定义单元格

Ant Design-Vue3 表格可以通过 `customRender` 属性来自定义单元格内容。该属性是一个函数，接收两个参数：`text` 和 `record`。其中，`text` 表示该单元格的文本内容，`record` 表示该行记录的数据对象。

以下是一个示例代码：

<template>
  <a-table :columns="columns" :dataSource="dataSource">
    <template #name="text">
      <span v-if="text === 'male'">男</span>
      <span v-if="text === 'female'">女</span>
    </template>
  </a-table>
</template>

<script>
import { ref } from 'vue';
import { Table } from 'ant-design-vue';

export default {
  components: {
    'a-table': Table,
  },
  setup() {
    const dataSource = ref([
      { name: '张三', gender: 'male', age: 18 },
      { name: '李四', gender: 'female', age: 20 },
    ]);

    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
        customRender: (text, record) => {
          return {
            children: text,
            attrs: {
              style: 'color: red;',
            },
          };
        },
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
    ];

    return {
      dataSource,
      columns,
    };
  },
};
</script>

在上面的示例代码中，我们通过 `customRender` 属性将性别的文本内容进行了转换，并且给该单元格设置了红色字体。