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

问题描述

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

最终效果

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

思路分析

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

图示如下

代码如下

          <el-pagination layout="slot" :total="total">
            <span class="leftPagination"
              >共{{ total }}条记录，第{{ page }}/{{ Math.ceil(total / limit) }}页面</span
            >
          </el-pagination>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
          >
          </el-pagination>

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

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