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, // 使用},};},}
]