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

问题描述

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

最终效果

image

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

思路分析

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

图示如下

比较完整的分页效果(带有第几分之几页)-使用两个el-pagination分页组件_第1张图片

代码如下

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

          
          
  • total 总条数
  • page 当前页是第几页
  • limit 每页显示几条
  • @size-change 当每页显示的条数发生改变的时候触发这个事件函数
  • @current-change 当前页发生改变的时候会触发这个事件函数
其实很简单,使用两个分页组件即可

你可能感兴趣的:(比较完整的分页效果(带有第几分之几页)-使用两个el-pagination分页组件)