目前使用jeecg-boot作为基础框架进行项目开发,其中前端使用的是Ant Design Vue.
其中遇到个关于pagination分页组件的小问题,在此记录。
首先,页面中有一个表格,对应组件自然就是<a-table>
文档在此https://www.antdv.com/components/table-cn/
在这里<a-table>有一个配置项:pagination="paginationOption",就是这个样子
将pagination的相关配置项放到这个对象内就OK了。
这样可以快捷配置一个与表格对应的分页组件,而不用<a-table><a-pagination>单独写再进行关联了。
现在问题来了,如何自定义下来选项名呢???
要把默认的10条/页,20条/页......最后加个自定义项"全部"。
在<a-pagination>的文档中有提到一个方法,使用了插槽
https://www.antdv.com/components/pagination-cn/
不过,现在不是在单独写<a-pagination>,而是将分页配置传入<a-table>,<a-pagination>组件内置在<a-table>中,当然不建议修改。
这时候可以在:pagination="paginationOption"的配置项里面加一项buildOptionText
这个配置项是个回调函数,接收的传值即为分页条数10、20、30等。返回值即为显示在下拉选项中的内容
如下配置即可: