Question

我们已使用带有分页+可扩展行功能的antd表。单击+图标时，行会展开。内部会调用行详细信息api并在展开的视图中显示。

我们使用了antd扩展行功能，也称为api，它在首页上运行良好。由于我们还添加了分页功能，因此当检查第二页时将无法使用，它仍显示旧的密钥记录。

onTableRowExpand(expanded, record){
   getChildData(record.id) // service call to fetch child data displayed as expanded row details

   var keys = [];
   if(expanded){
    keys.push(record.id); //  record.id as row key which is coming same across pagination
   }

this.setState({expandedRowKeys: keys});
}

我们想知道使用ReactJS + Antd显示扩展行（子表）所需的更改，其中还包括分页。

Answer 1

您的问题可能与antd对分页表中的行进行计数的方式有关。索引在每个页面上都会重置，因此必须将页码添加到索引中，才能正确计算索引。

我根据antd的an example和ajax的示例创建了expanded rows，

  expandRow = (record, index) => {
    // get the id by the current 0 based page number
    const page = (this.state.pagination.current || 1) - 1;
    index = 10*page + index; // 10 should be a variable.

    this.fetchDetails(index);
    return (
      <p style={{margin: 5}}>
        {this.state.expandRowData[index] ?
        <span>{ JSON.stringify(this.state.expandRowData[index]) }</span>
        :
        <span>(Loading...)</span>
        }
      </p>
    )
  }

ReactJS + Antd-分页动态行扩展问题

1 个答案: