Question

我有一个需要可变行高的反应数据网格。

<ReactDataGrid
    ref={node => this.grid = node}
    enableCellSelect
    columns={columnDefs}
    rowGetter={this.rowGetter(this)}
    rowsCount={this.props.table.length}
    rowRenderer={RowRenderer}
    rowHeight={50}
    rowScrollTimeout={200}
    minHeight={550}
    minColumnWidth={15}
/>

我最常使用行渲染器并动态计算行高

class RowRenderer extends React.Component {
    setScrollLeft(scrollBy) {
        this.refs.row.setScrollLeft(scrollBy);
    }

    getRowHeight() {
        const rowLines = Math.ceil((this.props.row.desc.length + 1) / 150);
        return rowLines * 50;
    }

    render() {
        return (
            <ReactDataGrid.Row
                ref="row"
                {...this.props}
                height={this.getRowHeight()}
            />
        );
    }
};

但是，由于虚拟化创建的div使用固定的行高

，滚动无法正常工作

https://github.com/adazzle/react-data-grid/issues/671

<div class="react-grid-Canvas" style="position: absolute; top: 0px; left: 0px; overflow-x: auto; overflow-y: scroll; width: 1214px; height: 498px;">
    <div>
        <div style="height: 600px;">  <!-- always increments by 50px, the initial row height -->

我试图找到一种方法来重载处理滚动的函数，但还没有找到一种方法来执行此操作。有没有办法重载滚动并设置高度，以便滚动顺畅？

Answer 1

我最终使用过扫描并将可见列设置为始终为0

// extend third party lib react-data-grid ReactDataGrid
import ReactDataGrid from 'react-data-grid';


class TableDataGrid extends ReactDataGrid {
    render() {
        // force viewport columns to always start from zero
        // to prevent row re-rendering when scrolling horizontally
        if (this.base && this.base.viewport) {
            this.base.viewport.getVisibleColStart = () => 0;
        }
        return super.render();
    }
}

module.exports = TableDataGrid;

不漂亮，但适用于Chrome和Firefox。对于safari仍然存在渲染问题，其中标头不与数据行保持同步，但它是有效的

react-data-grid变量高度行

1 个答案: