Ant Design Table 自带的滚动条不太美观，我们来用react-custom-scrollbars插件给它美化一下。
先看一下最终的效果，增加一下信心：
安装 react-custom-scrollbars
不多说了，直接安装插件
npm install react-custom-scrollbars --save
引入滚动条插件和表格组件，写个DataTable组件
注意：
当表格重新渲染的时候，滚动条会重新滚动到顶部，之前滚动的位置会消失。所以我们需要在滚动条停止的时候记下它的位置，当下次更新时，重新定位滚动条的位置。
import React from 'react';import { Table } from 'antd';import { Scrollbars } from 'react-custom-scrollbars';// 数据表头const columns = [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',},// 增加空白列{}];// 滚动条参数const scroll = {// 如果最终结果表格内容与表格头部无法对齐。// 表格头需要增加空白列，弹性布局width: '100%',// 最大高度，内容超出该高度会出现滚动条height: 100,}class DataTable extends ponent{// 滚动结束，记下滚动位置handleScrollStop = () => {if (this.scrollbarsRef.current){this.scrollTop = this.scrollbarsRef.current.getScrollTop();}};componentDidMount() {// 覆盖ant design 自带滚动条样式document.querySelector('.ant-table-scroll > .ant-table-body').style.overflow='hidden';// 滚动条组件ref，重新设置滚动位置this.scrollbarsRef = React.createRef();}// 组件重新渲染，重新设置滚动条的位置componentDidUpdate(prevProps, prevState, snapshot) {if (this.scrollbarsRef.current){this.scrollbarsRef.current.scrollTop(this.scrollTop);}}render() {const dataSource = [{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号',},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号',},];// 词法作用域const self = this;// 用react-custom-scrollbars包裹住表格内容const components = {table (props) {const { className } = props;return (<Scrollbars style={scroll}onScrollStop={self.handleScrollStop}ref={ self.scrollbarsRef } ><table className={className}>{ props.children }</table></Scrollbars>)}};return (<TabledataSource={dataSource}columns={columns}// 此scroll选项必须开启，宽高与react-custom-scrollbars插件一致scroll={{y: scroll.height, x: scroll.width}}// 将react-custom-scrollbars组件插入到表格中components={components}/>)}}export default DataTable;
