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