ant design动态合并行单元格

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

效果图:

### 右上角,点个赞呗!谢谢

猜你喜欢

转载自blog.csdn.net/RuiKe1400360107/article/details/88031574
今日推荐