@ttk/component/src/table/lazyTable.js

ttk组件库

import React, { PureComponent } from 'react'
import { Table } from 'antd'
import ReactDOM from 'react-dom'

export default class TableLarge extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            scrollTop: 0,
            rowHeight: props.rowHeight || 36.8,
            showRows: props.showRows || 20,
            scorllY: props.scroll && props.scroll.y || 300
        }
    }

    componentDidMount = () => {
        const me = ReactDOM.findDOMNode(this)
        if (this.props.scroll && this.props.scroll.y === true) {
            const tableThead = me.getElementsByClassName('ant-table-thead')[0]
            const scorllY = me.offsetHeight - tableThead.offsetHeight
            this.setState({
                scorllY
            })
        }

        const dom = me.querySelector('.ant-table-body')
        dom.addEventListener('scroll', (e) => {
            const tr = me.querySelector('.ant-table-body table .lazy_table_last')
            const top = me.querySelector('.ant-table-body').scrollTop
            if (!tr) {

                const height = me.querySelector('.ant-table-body table').offsetHeight
                const { scorllY, scrollTop, rowHeight } = this.state
                if (Math.abs(scrollTop - top) < rowHeight) return
            }
            this.setState({
                scrollTop: top
            })
        }, false)
    }

    componentWillReceiveProps = (nextProps) => {
        let scorllY = nextProps.scroll && nextProps.scroll.y || 300
        if (nextProps.scroll && nextProps.scroll.y === true) {
            const me = ReactDOM.findDOMNode(this)
            const tableThead = me.getElementsByClassName('ant-table-thead')[0]
            scorllY = me.offsetHeight - tableThead.offsetHeight
        }
        this.setState({
            rowHeight: nextProps.rowHeight || 36.8,
            showRows: nextProps.showRows || 20,
            scorllY
        })
    }

    getDataSource = (data) => {
        if (!data) {
            return []
        }
        const me = ReactDOM.findDOMNode(this)
        const { scrollTop, rowHeight, showRows, scorllY } = this.state,
            lens = data.length,
            sumHeight = rowHeight * lens,
            dataHeight = showRows * rowHeight,
            polyFillHeight = (dataHeight - scorllY) / 2

        let firstHeight = 0, lastHeight = 0
        if (scrollTop <= polyFillHeight) {
            lastHeight = sumHeight - dataHeight
        } else {
            firstHeight = scrollTop - polyFillHeight
            lastHeight = sumHeight - firstHeight - dataHeight
        }
        let data2 = JSON.parse(JSON.stringify(data))
        const dataStart = Math.floor(firstHeight / rowHeight)
        this.dataStart = dataStart
        this.lastHeight = lastHeight
        const dataEnd = dataStart + showRows
        data2 = data2.slice(dataStart, dataEnd)
        if (firstHeight > 0) {
            data2.unshift({
                name: 'first',
                height: firstHeight
            })
        }
        if (lastHeight > 0) {
            data2.push({
                name: 'last',
                height: lastHeight
            })
        }
        return data2
    }

    onRow = (record, index) => {
        let style = {}
        if (record.height) {
            style.height = record.height + 'px'
        }
        let onRowByProps = this.props.onRow ? this.props.onRow(record, index) : {};
        return {
            className: record.height ? `lazy_table_tr lazy_table_${record.name}` : null,
            style,
            key: Math.random(),
            ...onRowByProps,
        }
    }

    renderColumns = (data) => {
        let count = 0
        if (this.dataStart == 0) {
            count = 0
        } else {
            count = this.dataStart - 1
        }
        return data.map(item => {
            return item.render ? {
                ...item,
                render: (text, record, index) => {
                    return item.render(text, record, index + count)
                }
            } : { ...item }
        })
    }

    render() {
        const { scorllY } = this.state
        return (
            <Table
                {...this.props}
                onRow={this.onRow}
                scroll={{ y: scorllY }}
                pagination={false}
                dataSource={this.getDataSource(this.props.dataSource)}
                columns={this.renderColumns(this.props.columns)}
            />
        )
    }
}