vue3 ant-design-vue 自定义表头

一个简单的自定义表头场景，官方文档里好像没有示例，记录下帮助有缘人。

<template>
  <a-table :columns="columns" :data-source="data" bordered size="middle">
    <template #morning>
      <span style="color: green">早</span>
    </template>
    <template #run>
      <span>🏃🏻‍♀️</span>
    </template>
  </a-table>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const columns = [
  {
    title: '时间',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: 'left',
  },
  {
    // title: '早', 需要注释title
    slots: { title: 'morning' },
    children: [
      {
        // title: '跑步',
        dataIndex: 'index',
        key: 'index',
        slots: { title: 'run' },
      },
      {
        title: '早饭',
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: '学习',
        dataIndex: 'index',
        key: 'index',
      },
    ],
  },
  {
    title: '中',
    children: [
      {
        title: '吃饭',
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: '午睡',
        dataIndex: 'index',
        key: 'index',
      },
    ],
  },
  {
    title: '晚',
    children: [
      {
        title: '睡觉',
        dataIndex: 'index',
        key: 'index',
      },
    ],
  },
]
const data = [...Array(100)].map((_, i) => ({
  key: i,
  index: i,
  name: 20220301 + i,
}))
export default defineComponent({
  setup() {
    return {
      data,
      columns,
    }
  },
})
</script>