vue3 + antd-vue@4 a-table单元格合并，rowSpan（行合并），colSpan（列合并）详解, 表头合并详解， 表头自定义详解

在Vue 3和Ant Design Vue 4中，使用a-table组件实现行和列的单元格合并可以通过slot-scope属性和自定义渲染函数来实现。

以下是一个简单的例子，展示如何使用rowSpan和colSpan来合并单元格：

<template>
  <a-table :columns="columns" :dataSource="data">
    <template slot="name" slot-scope="text, record, index">
      <span v-if="index === 0" :rowSpan="2">{{ text }}</span>
      <span v-else>{{ text }}</span>
    </template>
    <template slot="age" slot-scope="text, record, index">
      <span :colSpan="index === 0 ? 2 : 1">{{ text }}</span>
    </template>
  </a-table>
</template>
 
<script>
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';
 
export default defineComponent({
  components: {
    'a-table': Table,
  },
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 2 Lake Park',
        },
      ],
    };
  },
});
</script>

在这个例子中，我们定义了两列name和age。在name列的模板中，我们通过index === 0来判断是否需要合并行。第一个单元格（索引为0的单元格）将会被合并为两行。在age列的模板中，我们通过条件渲染来决定是否合并列，索引为0的单元格（即第一个条目的age）将会合并为两列。其他单元格将正常显示。