关于segmentfault:比较完整的分页效果带有第几分之几页使用两个elpagination分页组件

问题形容

饿了么 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 当前页产生扭转的时候会触发这个事件函数

其实很简略，应用两个分页组件即可