比较完整的分页效果（带有第几分之几页）-使用两个el-pagination分页组件

问题描述

饿了么UI自带的有分页组件，功能基本上挺完全的，不过没有第几分之几页的效果。如果想实现这种效果怎么办？先看一下，效果图吧

最终效果

比如总共有10页，当前是第一页，就显示第 1/10 页。

思路分析

如果只使用一个分页组件示没法实现这种效果的。所以换个思路，一个分页组件不行，那就用两个

图示如下

代码如下

          
            共{{ total }}条记录，第{{ page }}/{{ Math.ceil(total / limit) }}页面
          

          
          

• total 总条数
• page 当前页是第几页
• limit 每页显示几条
• @size-change 当每页显示的条数发生改变的时候触发这个事件函数
• @current-change 当前页发生改变的时候会触发这个事件函数

其实很简单，使用两个分页组件即可