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

【问题标题】：ReactJS+ Antd - pagination dynamic row expand issueReactJS + Antd - 分页动态行扩展问题
【发布时间】：2019-11-18 14:44:18
【问题描述】：

我们使用了带有分页+可扩展行功能的antd table。单击 + 图标时，行会展开。内部 Row details 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 显示扩展行（子表）所需的更改，其中还包括分页。

【问题讨论】：

Documentation 表示expandedRowRender 函数具有以下签名：Function(record, index, indent, expanded):ReactNode。看来您正在使用 record 作为扩展。你用的是哪个版本的antd？

标签： reactjs antd

【解决方案1】：

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

我结合antd的ajax和expanded rows的例子创建了an example，

  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>
    )
  }

【讨论】：