vue 里el-pagination 分页设置全部

vue 里el-pagination 分页设置全部？首先使用el-pagination组件。@size-change在每页数据的个数发生改变时触发。@curren-change在页数发生改变时触发。

数据源定义的数据，默认展示第一页，页面数据10条

 

 

方法触发时的 *** 作。

每页数据个数发生改变时触发handleSizeChange(size)，参数size即是选择的每页数据的数量。页数发生改变时触发handleCurrentChange(current)，current即是选择的页面。在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。

分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。

第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示：

第二步：添加分页所需的变量，如下所示：

第三步：添加相应的分页方法，如下所示：

第四步：修改查询按钮逻辑，在成功查询后，更新数据的总数量。代码如下所示：

第五步：使用slice实现前端的假分页，最终vue文件中的主要代码如下所示：

最终效果如下所示：

目前使用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等。返回值即为显示在下拉选项中的内容

如下配置即可：

$('#dg').datagrid({

url: '${ctx}/rt/test/rtTestItem/getRtTestItemList',//请求方法的地址

title: '查询结果',

loadMsg: '正在加载信息...',//当数据没有加载出来时显示的文字

pagination: true,//是否有分页

pageSize:10,//页大小，一页多少条数据

pageNumber: 1,//默认当前的页码

pageList: [10, 30, 50],//一页可显示数据的条目

queryParams:{},//往后台传递参数，json格式 */

---