ant Design的table组件结合h函数实现合并行

项目有vite搭建，主要技术是vue3+typeScriopt，ui库使用的是ant Design，今天在实现表格合并单元格时遇到一个问题，合并后操作栏显示是空的。
现象：

<a-table :columns="columns" :data-source="tableData" :row-key="(record, index) => index" :pagination="false" bordered>
  <template #scenarioHandle="{ record }">
    <a-button type="link" @click="handleRehearse(record)">演练a-button>
  template>
  <template #handle="{ record }">
    <a-button type="link" @click.stop="handleCheck(record)">详情a-button>
    <a-button type="link" @click.stop="handleEdit(record)">编辑a-button>
  template>
a-table>
1
2
3
4
5
6
7
8
9

  columns = [
    {
      title: '文档名称',
      dataIndex: 'title',
      key: 'title',
      customRender: ({ text, record, index }) => {
        const obj = {
          children: text,
          props: {} as any,
        };
        obj.props.rowSpan = record.rowSpan
        return obj;
      },
    },
    {
      title: '所属系统',
      dataIndex: 'systemSn',
      key: 'systemSn'
    },
 
	    ......

    {
      title: '场景操作',
      dataIndex: 'scenarioHandle',
      key: 'scenarioHandle',
      slots: { customRender: 'scenarioHandle' },
    },
    {
      title: '文档操作',
      dataIndex: 'handle',
      key: 'handle',
      slots: { customRender: 'handle' },
      customRender: ({ text, record, index }) => {
        const obj = {
          children: text,
          props: {} as any,
        };
        obj.props.rowSpan = record.rowSpan
        return obj;
      },
    },
  ];
  table = [
    {
      title: 'test1',
      systemSn: '所属平台',
      application: '所属应用',
      url: 'http://www.baidu.com',
      fileList: [],
      rowSpan: 2,
      scenarioNmme: '场景名称1',
      eventTime: '2022-7-20',
      startTime: '2022-7-20',
      handler: '开发者'
    },
    {
      title: 'test1',
      systemSn: '所属平台',
      application: '所属应用',
      url: 'http://www.baidu.com',
      fileList: [],
      rowSpan: 0,
      scenarioNmme: '场景名称1',
      eventTime: '2022-7-20',
      startTime: '2022-7-20',
      handler: '开发者'
    },
    {
      title: 'test2',
      systemSn: '所属平台',
      application: '所属应用',
      url: 'http://www.baidu.com',
      fileList: [],
      rowSpan: 1,
      scenarioNmme: '场景名称1',
      eventTime: '2022-7-20',
      startTime: '2022-7-20',
      handler: '开发者'
    },
  ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

我想第一列和最后一列进行合并，但是最后一栏是操作栏，实际数据中是没有这一栏的数据的，想通过slot插槽的方法条件两列操作栏，但是合并过程中用到了customRender，最后一栏的customRender方法中的text是undefined，而customRender又会将slot插槽中的内容覆盖掉，所以表格最后一栏会显示为空，没有达到想要的效果，这时候看到可以使用vue的h函数。于是做了以下修改
修改后：
1.因为我最后一栏操作栏有多个操作按钮，所以见这些按钮封装成一个组件，方便h函数创建虚拟节点

columns = [
    {
      title: '文档名称',
      dataIndex: 'title',
      key: 'title',
      customRender: ({ text, record, index }) => {
        const obj = {
          children: text,
          props: {} as any,
        };
        obj.props.rowSpan = record.rowSpan
        return obj;
      },
    },
    {
      title: '所属系统',
      dataIndex: 'systemSn',
      key: 'systemSn'
    },
 
	    ......

    {
      title: '场景操作',
      dataIndex: 'scenarioHandle',
      key: 'scenarioHandle',
      slots: { customRender: 'scenarioHandle' },
    },
    {
      title: '文档操作',
      dataIndex: 'handle',
      key: 'handle',
      customRender: ({ text, record, index }) => {
        const obj = {
          children: h(HandleButtons, {
            props: record,
            onHandleEdit: () => {
              //编辑
            }，
            onHandleCheck: () => {
              //查看详情
            }
          }),
          props: {} as any,
        };
        obj.props.rowSpan = record.rowSpan
        return obj;
      },
    },
  ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

2.子组件

<template>
  <div>
    <a-button type="link" @click.stop="$emit('handleCheck')">详情a-button>
    <a-button type="link" @click.stop="$emit('handleEdit')">编辑a-button>
  div>
template>
1
2
3
4
5
6

3.父组件中就不需要使用slot插槽了

<a-table :columns="columns" :data-source="tableData" :row-key="(record, index) => index" :pagination="false" bordered>
  <template #scenarioHandle="{ record }">
    <a-button type="link" @click="handleRehearse(record)">演练a-button>
  template>
  
a-table>
1
2
3
4
5
6
7
8
9

效果：

子组件通过$emit传值，然后在父组件中调用事件，但是此时还有一个问题，onHandleEdit和onHandleCheck访问不到父组件组件的方法，在这两个方法里打印this只能得到data中的数据，不过我这里目前是够用了，后面看看还有方法完善。

仅供参考，如有错误，还请指正！！！