1

我基本上希望使用 react-virtualized Table 来做到这一点： https ://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/Table

使用可滚动的表格主体制作粘性页脚，如页眉。

我在 AutoSizer 中为页眉+正文和页脚创建了 2 个表格。但是当第一个表格滚动时，我的页脚宽度不正确：screenshot。我该如何解决？或者通过其他方式实现粘页脚

  <AutoSizer>
{({ height, width }) => {
    const tableColumns = this.getColumns(columns, width);

    return (
        <div>
            <Table
                width={width}
                height={Math.min(height, HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * dataLength)}
                rowHeight={bodyRowHeight}
                onScroll={onScroll}
                rowRenderer={rowRenderer}
                rowCount={dataLength}
                rowGetter={({ index }) => data[index]}>
                {tableColumns}
            </Table>
            {total && <Table
                width={width}
                height={40}
                gridClassName={'has-footer'}
                disableHeader
                rowHeight={bodyRowHeight}
                rowRenderer={rowRenderer}
                rowCount={1}
                rowGetter={() => total}>
                {tableColumns}
            </Table> }
        </div>
    );
}}

更新

渲染方法

<AutoSizer>
{({ height, width }) => {
    const tableColumns = this.getColumns(columns, width);

    console.log('tableRef:', this.tableRef && this.tableRef.state);
    return (
        <div>
            <Table
                width={width}
                height={Math.min(height, HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * dataLength)}
                ref={this._setRef}
                headerClassName={headerClassName}
                headerHeight={headerRowHeight}
                rowHeight={bodyRowHeight}
                rowRenderer={rowRenderer}
                rowCount={dataLength}
                rowGetter={({ index }) => data[index]}>
                {tableColumns}
            </Table>
            {total &&
            <FooterComponent
                rowData={total}
                width={width - (this.tableRef && this.tableRef.state.scrollbarWidth || 0)}>
                {tableColumns}
            </FooterComponent>}
        </div>
    );
}}


_setRef = (ref) => {
        this.tableRef = ref;
    };
4

1 回答 1

1

2个想法：

Table1）为你的粘性页脚使用一个全新的是矫枉过正的。仅渲染标题（通过导入defaultTableHeaderRowRenderer或仅渲染您自己的 div）会更有效。

2）您的宽度在页脚上的滚动条量是关闭的。这有点 hacky，但您可以Table通过 ref （例如tableRef.state.scrollbarWidth） 获得测量值，然后只需执行该Table操作并padding-right在页脚 CSS 上设置该数量。

于 2017-04-12T16:59:21.923 回答