Ant设计表行合并基于数据而不是索引值 [英] Ant design table row merge based on data instead of index value

问题描述

 {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    render: (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      // These two are merged into above cell
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      if (index === 4) {
        obj.props.colSpan = 0;
      }
      return obj;
    },
  },

在根据索引值行跨度大小决定的示例中，我们可以根据之前的列数据来做吗(如果有两个 John Brown 则行跨度应该是 2)?.所以基本上我们需要通过对行进行排序和比较行值来决定行跨度大小.

In dis example based on index value rowsspan size is decided, can we do that based on previous column data (if there are two John Brown's then row span should be 2)?. So basically we need to decide row span size by sorting rows and comparing row value.

推荐答案

https://stackblitz.com/edit/react-bubauz?file=index.js我可以给你一个名字列的想法，它可以帮助你.如果要合并 Name 列:

https://stackblitz.com/edit/react-bubauz?file=index.js I can give you an idea with name column, mb it helps you. If you want to merge Name column:

首先您需要对表格数据进行排序.然后创建 Set().并且你需要在 useEffect() 中清除 Set.

First of all you need to sort your table data.Then create Set(). And you need clear Set in useEffect().

const names = new Set();

{
  title: 'Name',
  rowSpan: 1,
  dataIndex: 'name',
  render: (value, row, index) => {
    const obj = {
      children: value,
      props: {}
    };
    
    if (names.has(value)) {
      obj.props.rowSpan = 0;
    } else {
      const occurCount = tableData.filter((data) => data.name === value).length;
      
      obj.props.rowSpan = count;
      names.add(value);
    }

    return obj;
  }
}

这篇关于Ant设计表行合并基于数据而不是索引值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！