博客

要实现的效果

思路：

1.第一行 或 当前行与上一行 制定字段值不一样 就进行合并行数计算

2.不满足条件就不渲染出来

前提

colunms相关字段值相同的数据放在一起的数组

定义合并行数方法

// 计算合并行数
  getMergeRowNum = (col_name, row, dataSource, compare_col_name = null) => {
    const temp = {};
    let n = 0;
    if (col_name !== temp[col_name]) {
      temp[col_name] = row[col_name];

      dataSource.forEach((e) => {
        if (compare_col_name !== null) {
          if (e[col_name] === temp[col_name] && e[compare_col_name] === row[compare_col_name]) {
            console.log(e[col_name], temp[col_name])
            n += 1;
          }
        } else {
          if (e[col_name] === temp[col_name]) {
            console.log(e[col_name], temp[col_name])
            n += 1;
          }
        }
      })
    }
    console.log(col_name + '=' + temp[col_name] + '合作行数', temp, n)
    return n
  }

render

    render={(value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };

      // 与上一行不同，计算行数
      if ((index > 0 && row.status !== rulesData[index - 1].status) || index === 0) {
        obj.props.rowSpan = this.getMergeRowNum('status', row, rulesData);
      } else {
        obj.props.rowSpan = 0;
      }
      return obj;
    }
  }