reactjs - 如何使用 antd react 实现动态行跨度

Question

我正在尝试在 antd 中准备一个具有动态行跨度的表（数据将是动态的）

我有如下数据。

想显示如下。你能帮忙吗？

[{"col1":"temp1","col2":"1","col3":"x"}, {"col1":"temp1","col2":"1","col3":"y"}, {"col1":"temp1","col2":"2","col3":"z"}, {"col1":"temp2","col2":"3","col3":"a"}];

Answer 1

我们可以编写自定义渲染方法来解决这个问题。样本 ：

render: (value, row, index) => {
        const obj = {
          children: value,
          props: {},
        };
        if (index >= this.state.branch_new_index) {
          for (let i = 0; index + i !== metrics.length
                && value === metrics[index + i].branch  && 
                metrics[index].product === metrics[index + i].product; i += 1) {
            obj.props.rowSpan = i + 1;
            this.state.branch_count = i + 1;
          }
          this.state.branch_new_index = index + this.state.branch_count;
          if (index + 1 >= metrics.length) {
            this.state.branch_new_index = 0;
          }
        } else {
          obj.props.rowSpan = 0;
          if (index + 1 >= metrics.length) {
            this.state.branch_new_index = 0;
          }
        }
        return obj;
      },