最最完整的分页效果

最新推荐文章于 2024-08-23 16:16:06 发布

蜜桃味齐齐

最新推荐文章于 2024-08-23 16:16:06 发布

阅读量332

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44278386/article/details/115938085

版权

最近在写一个项目需要有很完整的分页效果，element-ui给的效果不够，想实现 共xx条记录，第x/x页。组件库没有的话，只能自己写了，采用插槽可以实现这个效果。
这个效果用插槽实现

具体代码如下：

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

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