0

clipboard.png
目前想让行为绩效跨两行,使下面的$$与¥¥,和实发明细在一行上。
代码如下:

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

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

clipboard.png

我想要的效果图是这样的,目前来看设置rowSpan后效果达不到预期,是用法不对还是用其他方式,请有经验的大神帮忙,谢谢。
clipboard.png
第一次发帖,不规范的地方海涵。

2019-03-12 提问
1 个回答
0

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
  }
}

clipboard.png

撰写答案

推广链接