ant design动态合并行单元格

最新推荐文章于 2025-06-17 16:09:34 发布

原创最新推荐文章于 2025-06-17 16:09:34 发布 · 6.7k 阅读

16 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用React的Table组件展示复杂报表数据的方法，通过自定义rowSpan属性实现表格单元格的纵向合并，提高了数据展示的清晰度和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    const detailColumn = [
      {
        title: '报表名',
        dataIndex: 'aa',
        className: 'center',
        width: '20%',
        render: (text, record) => {
          const obj = {
            children: text,
            props: {},
          };
          obj.props.rowSpan = record.rowSpan;
          return obj;
        },
      },
      {
        title: '指标名称',
        dataIndex: 'bb',
        className: 'center',
        width: '20%',
      },...
.....

          <Table
            rowKey="indexCode"
            dataSource={makeData(reportInfoDataDetail)} //关注 makeData
            columns={columns}
            bordered
            pagination={false}
            scroll={{ y: 300 }}
            rowClassName={() => 'editable-row'}
            components={components}
          />
.....



//遍历子元素，并赋值纵向合并数rowSpan
function makeData(data) {
  const sortResult = sortData(data);
  const dataSource = [];
  sortResult.forEach((item) => {
    if (item.children) {
      item.children.forEach((itemOne, indexOne) => {
        const myObj = itemOne;
        myObj.rowSpan = indexOne === 0 ? item.span : 0;
        dataSource.push(myObj);
      });
    }
  });
  return dataSource;
}

//去重并合并到children
function sortData(dataArr) {
  const orgArrRe = dataArr.map(item => ({ reportName: item.reportName }));
  const orgArr = uniqueObjArr(orgArrRe, 'reportName');//数组去重
  for (const childOne of orgArr) { //去重reportName合并到children，得到一共有几个不同的reportName要合并
    childOne.children = [];
    for (const childTwo of dataArr) {
      if (childOne.reportName === childTwo.reportName) { //childOne是去重的，childTwo是没去重的
        childOne.children.push(childTwo);
      }
    }
  }
  for (const every of orgArr) {
    every.span = every.children ? every.children.length : 0;
  }
  orgArr.forEach((every) => { every.span = every.children ? every.children.length : 0; });
  return orgArr;
}

//对象数组去重
function uniqueObjArr(arr, fieldName) {
  const result = [];
  const resultArr = [];
  for (const child of arr) {
    if (result.indexOf(child[fieldName]) === -1) {
      result.push(child[fieldName]);
      resultArr.push(child);
    }
  }
  return resultArr;
}

效果图：

### 右上角，点个赞呗！谢谢