antd 分页组件的pageSizeOptions属性使用需注意

问题描述

在近期的开发中，使用的UI框架是antd，列表展示少不了用到分页组件。在使用 antd的分页组件Pagination的时候，关于每页大小的设置有两个相关属性PageSize和pageSizeOptions。根据下拉框可以选择pageSizeOptions的元素，来设置PageSize，但是修改PageSize并不能影响pageSizeOptions的被选项。且组件如果被卸载，但是想要保存PageSize也会出问题，因为pageSizeOptions不可以由代码指定选择第几项。当组件被卸载又挂载后，pageSizeOptions就会默认选择第一项，如果我们保存PageSize就会出现导致pageSizeOptions的被选项与PageSize不一致的情况。

相关属性

• PageSize: 每页条数，需要传一个number值
• pageSizeOptions：指每页可以显示多少条，需要传一个元素为string的数组，例如[‘10’, ‘20’, ‘50’, ‘100’]。其实就是一个可以选择当前页面展示多少条数据的下拉框，这个属性可以用来选择下拉框的选项。

最终妥协，每次重新挂在组件页面大小都做初始化，不进行保存。