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

仙女爱吃鱼

于 2024-10-12 17:37:25 发布

阅读量1.9k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： antd react 工具类文章标签：前端 react antd table

本文链接：https://blog.youkuaiyun.com/weixin_38318244/article/details/142881567

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

在这里插入图片描述

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

我们按【数据源】进行分组后，把第一组编号为【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