组件库：antd 官网：[https://ant.design/docs/react/introduce-cn](https://ant.design/docs/react/introduce-cn) <br/> 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是自己根据屏幕显示调整的。