antd自适应高度表格

组件库：antd
官网：https://ant.design/docs/react/introduce-cn

react开发一般都是配合antd使用，由于中后台管理系统一般对表格的使用比较多，数据量也较大，所以表格都有滚动条以及高度自适应。

引入Table后使用如下：

<Table rowKey={(record, index) => pageSize*(current-1)+(index + 1)}
        scroll={{ y: tableHeight, x: columns.length * 150 + 50  }}
        columns={columns} size="small" 
        dataSource={dataSource}
        rowSelection={rowSelection}
        pagination={{
            size: "small",
            pageSize,
            current,
            total,
    
            showSizeChanger: true,
            onShowSizeChange:this.onShowSizeChange.bind(this)
        }}
        bordered 
        onChange={this.pageChange.bind(this)}
/>

rowKey是每行的key值，可以通过每页显示的页数pageSize和当前页数current来控制，就可以自己从序号1排到N。dataSource是表格数据，total为数据总数，一般从后台获取。onShowSizeChange这个方法就是控制pageSize的，一般小屏幕10条/页，大屏幕可以达到40条/页。onChange控制页数选择。这两个方法基本复制上去无需改动，轻松易懂。

// 每页显示数据选择
onShowSizeChange(current, pageSize) {
    console.log(current, pageSize)
}

// 更改页数
pageChange (e) {
        this.setState({
            current: e.current,
            pageSize: e.pageSize
        },() => {
            this.updatePage();
        })
}

然后最后一步很重要的就是滚动条，x轴可以根据自己设的单元格宽度去计算，y轴就是通过方法让它自适应，方法如下：

export const getHeight = (colHeight, height) => {
    let pageSize = height / colHeight
    if (pageSize % 5 != 0) {
        pageSize = Math.ceil(pageSize / 5) * 5
    }
    height -= 30
    return { pageSize, height }
}

把方法暴露出去就能使用了：

// 调用方法设置列和表的高度
let tableSize = getHeight(40, window.innerHeight - 270);
this.setState({
        tableHeight: tableSize.height,
        pageSize: tableSize.pageSize,
})

其中的40大概就是紧凑型表格的单元格高度，减去的270是自己根据屏幕显示调整的。