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
第一次发帖,不规范的地方海涵。

----------------------------第二次 补充------------------------------------
最终效果如下,下图是我那tr td 标签写的样子,其中¥是对应<Table> dataSource数据的列信息,$$另一部分数据。
clipboard.png

下图是用其显示的效果,效果差距太大,欲哭无泪TT.

clipboard.png

import React, { Component } from 'react'
import { Table } from 'antd'
export default class Test extends Component {
  render () {
    const columns = [
      {
        title: '部门',
        children: [
          {
            title: '核定金额',
            children: [
              {
                title: '员工编号',
                className:'hidden-bottom',
              },
              {
                title: '员工姓名',
                className:'hidden-bottom',
              }
            ],
          }
        ],
      },
      {
        title: '岗位绩效',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '积分制部门薪酬',
        children: [
          {
            title: '行为绩效',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '营销线',
            children:[
              {
                title: '积分绩效',

                children: [
                  {
                    title: '$$',
                    children: [
                      {
                        title: '实发明细',
                      }
                    ],
                  }
                ],
              },
            ]
          },
          {
            title: '运维线',
            children:[
              {
                title: '个人量化绩效',
                children: [
                  {
                    title: '$$',
                    children: [
                      {
                        title: '实发明细',
                      }
                    ],
                  }
                ],
              },
              {
                title: '团队绩效',
                children: [
                  {
                    title: '$$',
                    children: [
                      {
                        title: '实发明细',
                      }
                    ],
                  }
                ],
              },
              {
                title: '重点工作',
                children: [
                  {
                    title: '$$',
                    children: [
                      {
                        title: '实发明细',
                      }
                    ],
                  }
                ],
              },
            ]
          },
        ]
      },
      {
        title: '薪酬包核定绩效',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '专项绩效',
        children: [
          {
            title: '市场线奖励',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '职能线奖励',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '客服类奖励',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '维护线奖励',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '计划建设奖励',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '集客线奖励',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '专项绩效7',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '专项绩效8',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '运维转岗人员',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
          {
            title: '增量收益分享',
            children:[
              {
                title: '$$',
                children: [
                  {
                    title: '实发明细',
                  }
                ]
              },
            ]
          },
        ]
      },
      {
        title: '省公司穿透奖励',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '市公司嘉奖',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '其他奖励扣罚项',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '其他项1',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '其他项2',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '合计',
        children: [
          {
            title: '$$',
            children: [
              {
                title: '实发明细',
              }
            ]
          }
        ],
      },
      {
        title: '基层营销单元填写',
        children: [
          {
            title: '个人积分(统一运营系统展现)',
          },
          {
            title: '积分单价(统一运营系统展现)',
          },
          {
            title: '积分绩效验证',
          },
          {
            title: '积分验证差异原因',
          },
          {
            title: '实际个人积分(积分绩效存在差异填写)',
          }
        ],
      }
]
    return <Table columns={columns} bordered/>
  }
}

目前这么庞大的东西改如何设计?有没有思路借鉴下,谢谢。

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

撰写答案

你可能感兴趣的

推广链接