antd Table同名行合并[前端实现]

2020-01-10 10:15:01 星期五

传入数据列表和需要行合并的字段名
调用后会为每行数据添加一个${name}RowSpan字段 保存rowSpan的值

  setRowSpan = (data, name) => {
    const rowSpan = `${name}RowSpan`; // 添加的字段名
    let titleRow = data[0]; // 合并行
    titleRow[rowSpan] = 1;

    data.forEach((row, index) => {
      const nextRow = data[index + 1];
      if (!nextRow) return;
      if (row[name] === nextRow[name]) {
        titleRow[rowSpan] += 1;
        nextRow[rowSpan] = 0;
      } else {
        titleRow = nextRow; // 修改指向
        titleRow[rowSpan] = 1;
      }
    });
  };

columns = [
    {
      title: '风险类别',
      dataIndex: 'title',
      render: (text, row) => {
        return {
          children: text,
          props: {
            rowSpan: row.titleRowSpan, // 使用
          },
        };
      },
    }
]