问题形容

饿了么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 当前页产生扭转的时候会触发这个事件函数
其实很简略，应用两个分页组件即可