用react-custom-scrollbars插件美化 Ant Design Table 滚动条

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 React.Component{// 滚动结束，记下滚动位置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;

用react-custom-scrollbars插件美化 Ant Design Table 滚动条相关推荐

React开发（178）:ant design table基础用法
<Table columns={columns} dataSource={data} /> ant design重要的控制表头和数据的对象属性 columns data
React开发（274）:ant design table额外展开行
React开发（230）:ant design table固定表头
固定表头方便一页内展示大量数据.需要指定 column 的 width 属性,否则列头和内容可能不对齐. 如果指定 width 不生效或出现白色垂直空隙, 请尝试建议留一列不设宽度以适应弹性布局,或 ...
React开发（228）:ant design table根据宽度自动忽略
React开发（185）:ant design table控制居中和宽度
{ title: '冻结金额', type: 'price', dataIndex: 'frozenAmount', align: 'center', width: 80 },{ title: '钱包 ...
React开发（182）:ant design table中带线框的列表
ReactDOM.render(<Tablecolumns={columns}dataSource={data}borderedtitle={() => 'Header'}footer={ ...
ant design table column 设置width不生效解决方案
ant design table column 设置width不生效解决方案参考文章: (1)ant design table column 设置width不生效解决方案 (2)https://ww ...
Ant Design Table columns 参数配置隐藏列方法
Ant Design Table columns 参数配置隐藏列方法 const columns = [{title: '姓名',dataIndex: 'name',key: 'name',// 隐藏 ...
Ant Design table实现表头列宽拖拉官方 vue-draggable-resizable的魔改版
Ant Design table实现表头拖拽官方 vue-draggable-resizable的魔改版这里顺便也说一下使用官方vue-draggable-resizable组件,可能也有人不喜欢 ...
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...

用react-custom-scrollbars插件美化 Ant Design Table 滚动条

安装 react-custom-scrollbars

引入滚动条插件和表格组件，写个DataTable组件

注意：

用react-custom-scrollbars插件美化 Ant Design Table 滚动条相关推荐

最新文章

热门文章