vue自定义组件之分页组件

最新推荐文章于 2025-05-28 18:38:12 发布

星辰之嗨

最新推荐文章于 2025-05-28 18:38:12 发布

阅读量846

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_37200689/article/details/85010860

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码page来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。分页大多数情况下（基本上）是对异步请求数据的处理，因此需要弄明白分页的流程：

请求API，然后返回第一页的数据以及相关条件下的数据总数
将数据总数传给组件的属性total，并计算页码后渲染到页面上
通过点击上一页、下一页、页码以及输入页数跳转到相应的页面并发送请求

了解了流程之后，实现分页组件就容易得多了。
先来看一下效果图：

创建分页组件

template

<template>
  <div class="pagination">
    <span class="total">共{
  
  {total}}条</span>
    <button type="button" class="prev" @click="prev" v-if="showPrev">
      <span v-if="nextText">{
  
  {prevText}}</span>
      <i class="iconfont lg-back" v-else></i>
    </button>
    <ul class="pager">
      <li class="number" :class="[currentPage === item ? 'active': '']"
       v-for="item in pages" :key="item" @click.