在最近的项目开发中,有需求是需要表格展示并有简单分页,分页只显示页码与左右跳转分页功能,因此便使用到antd的Table组件与分页设置,我是这样使用的
图1
引入Table组件,设置好列信息,给分页对象设置当前页、总数、与每页显示数量、onChange等信息,页面如图2展示,能够达到预期效果。
图2
但是在冒烟测试阶段发现表格数据量比较大时,会出现pageSize切换器,而我的需求是不管多少数据每页固定展示10条数据,因此是不需要切换器的。
图3
之后就开始翻查antd分页组件的api,当我看到pageSizeOptions参数的默认值是[10, 20, 50, 100]时,我也好奇为什么数量较少时没有出现切换器,我把pageSizeOptions参数改为[],发现并不能解决问题,看来问题原因并不是它。
图4
继续往下翻api文档,最终发现了参数showSizeChanger,文中是这样解释的,当 total 大于 50 时默认为 true。......问题原因找到了,就是这个参数,把分页设置对象中加入参数showSizeChanger并给上false值,问题解决。
图5
这是在开发过程中遇到的很小的一个问题,选择把它记录下来,是因为告诫自己,在不熟悉一个框架或者技术时,往往让你吃bug的地方,就是这些小细节,因此在开发时一定要细心再细心。