ant design pro Table组件跨行显示的问题？

Question

目前想让行为绩效跨两行，使下面的$$与￥￥，和实发明细在一行上。
代码如下：

const columns = [
{
    title: '积分制部门薪酬',
    children: [
      {
        title: '行为绩效',
        //colSpan:2,
        children:[
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          },
        ]
      },
      {
        title: '营销线',
        // dataIndex: 'depttag',
        // key: 'depttag',
        children:[
          {
            title: '积分绩效',
            children: [
              {
                title: '￥￥',
                children: [
                  {
                    title: '实发明细',
                  }
                ],
              }
            ],
          },
        ]
      },

]
在代码中使用rowSpan:2,后出现行列错位的情况，如下：

我想要的效果图是这样的，目前来看设置rowSpan后效果达不到预期，是用法不对还是用其他方式，请有经验的大神帮忙，谢谢。

第一次发帖，不规范的地方海涵。

Answer 1

antd 表头只支持列合并，使用 column 里的 colSpan 进行设置
如果想要行合并，可以换一种思路
App.js

import React, { Component } from 'react'
import { Table } from 'antd'
import './App.less'

export default class App extends Component {
  render () {
    const columns = [
      {
        title: '积分制部门薪酬',
        children: [
          {
            title: '行为绩效',
            className: 'hidden-bottom',
            children: [
              {
                title: '',
                children: [
                  {
                    title: '$$',
                    children: [
                      {
                        title: '实发明细',
                        align: 'center',
                        dataIndex: 'a',
                        key: 'a',
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            title: '营销线',
            children: [
              {
                title: '积分绩效',
                children: [
                  {
                    title: '￥￥',
                    children: [
                      {
                        title: '实发明细',
                        align: 'center',
                        dataIndex: 'b',
                        key: 'b',
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
    return <Table columns={columns} bordered/>
  }
}

App.less

.hidden-bottom {
  border-bottom-color: transparent !important;

  div {
    position: relative;
    top: 30px
  }
}