vue3 ant design table中插槽使用

在Vue 3和Ant Design Vue中，你可以使用<a-table>组件的插槽来自定义表格的各个部分。以下是一个使用自定义插槽的例子：

<template>
  <a-table :columns="columns" :dataSource="data">
    <!-- 自定义表头 -->
    <template #headerCell="{ column }">
      <span>{{ column.title }}</span>
    </template>
 
    <!-- 自定义表格单元格 -->
    <template #bodyCell="{ text }">
      <a>{{ text }}</a>
    </template>
  </a-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { Table } from 'ant-design-vue';
 
const columns = ref([
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]);
 
const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // ...更多数据
]);
</script>

在这个例子中，我们使用了两个插槽：

1. #headerCell - 用于自定义表头单元格的内容。
2. #bodyCell - 用于自定义表格主体单元格的内容。

插槽的名字可以根据你需要自定义的内容进行更改，例如#headerRow可以用于自定义整行表头。记住，插槽的名字需要与a-table组件预设的插槽名称一致。