reactjs - 有没有办法虚拟化（例如使用 react-window）antd 嵌套表？

Question

antd在他们的文档中有一个示例，用于通过react-window集成虚拟滚动以提高大型表数据的性能

有人为antd中的嵌套表做过类似的事情吗？或者有任何指示/提示如何做？

Answer 1

上面提到的示例最终使用 react-window list 作为 antd 表的主体。这减少了 antd 表行的实际实现。如果要实现嵌套表功能，则必须手动将其写入网格内。因为我已经从网格内的列中渲染了渲染函数：

<div
          className={classNames('virtual-table-cell', {
            'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
          })}
          style={style}
        >
          {((mergedColumns as any)[columnIndex].dataIndex) !== '' && !((mergedColumns as any)[columnIndex].render)  ? (
            <div> {(rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex]} </div>
          ):(
            <div>  
                {(mergedColumns as any)[columnIndex].render()}
            </div>
          ) }
        </div>

Answer 2

<div
    className={classNames('virtual-table-cell', {
        'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
    })}
    style={style}
>
    {mergedColumns[columnIndex].dataIndex !== '' &&
    !mergedColumns[columnIndex].render ? (
        <div> {rawData[rowIndex][mergedColumns[columnIndex].dataIndex]} </div>
    ) : (
        <div>
            {mergedColumns[columnIndex].render(
                rawData[rowIndex][mergedColumns[columnIndex].dataIndex],
                rawData[rowIndex]
            )}
        </div>
    )}
</div>