antd table合并复杂单元格、分组合并行、分组合并列、动态渲染列、嵌套表头

项目里遇到个需求,涉及到比较复杂的单元格合并 、嵌套表头、分组合并行、合并列等,并且数据列还是动态的,效果图如下:
在这里插入图片描述

在这里插入图片描述

可以分组设置【显示列】例如:当前组为【合同约定】,显示列为【合同节点】和【节点金额】

我们按【数据源】进行分组后,把第一组编号为【0001】的单元行合并 ,然后再插入一行【小计】,根据显示的【列数】决定合并几个【单元格】,比如我们的需求可以设置为当【合同节点】与【金额】全部显示时,显示【小计】的信息,再进行单元格合并

我们的数据源如下:

动态列数据

const mockRowData = [
  // {
   
   
  //     name: '合同约定',
  //     key: 'agree',
  //     handle: 'lt',
  //     handleValue: 2312313,
  //     color: '#FF811A',
  //     enable: true,
  //     checked: true,
  //     // disabled: true,
  //     checkable: false,
  //     hidden: true,
  //     children: [
  {
   
   
    name: '合同节点',
    key: 'contractNodes',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: true,
    checked: true,
    type: 1,
  },
  {
   
   
    name: '金额',
    key: 'Money',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: true,
    checked: true,
    type: 1,
  },
  {
   
   
    name: '节点比例',
    key: 'NodeRatio',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: false,
    checked: true,
    type: 1,
  },
  {
   
   
    name: '付款条件',
    key: 'paymentTerms',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: true,
    checked: true,
    type: 1,
  },
  //     ],
  // },
  // {
   
   
  //     name: '确认收入',
  //     key: 'confirmIncome',
  //     handle: 'lt',
  //     handleValue: 2312313,
  //     color: '#FF811A',
  //     enable: false,
  //     checked: true,
  //     // disabled: true,
  //     checkable: false,
  //     hidden: true,
  //     children: [
  {
   
   
    name: '成果提交日期',
    key: 'submissionDate',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: false,
    checked: true,
    type: 2,
  },
  {
   
   
    name: '证明文件日期',
    key: 'fileDate',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: true,
    checked: true,
    type: 2,
  },
  {
   
   
    name: '确认收入',
    key: 'Income',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: false,
    checked: true,
    type: 2,
  },
  {
   
   
    name: '确认比例',
    key: 'confirmationRatio',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: false,
    checked: true,
    type: 2,
  },
  //     ],
  // },
  // {
   
   
  //     name: '收款',
  //     key: 'receivePayment',
  //     handle: 'lt',
  //     handleValue: 2312313,
  //     color: '#FF811A',
  //     enable: false,
  //     checked: true,
  //     // disabled: true,
  //     checkable: false,
  //     hidden: true,
  //     children: [
  {
   
   
    name: '到账日期',
    key: 'DateofReceipt',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: false,
    checked: true,
    type: 3,
  },
  {
   
   
    name: '金额',
    key: 'Money1',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: true,
    checked: true,
    type: 3,
  },
  {
   
   
    name: '确认比例',
    key: 'confirmationRatio1',
    handle: 'lt',
    handleValue: 2312313,
    color: '#FF811A',
    enable: false,
    checked: true,
    type: 3,
  },
  //     ],
  // },
  {
   
   
    name: '应收款',
    key: 'receivables',
    handle
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值