在 Vue.js 中使用分页

分页功能通过允许用户以较小的块或页面可视化数据来增强用户体验。 下面介绍如何创建带分页的 Vue.js 组件，以便我们一次只能查看部分数据。

我将首先在我们的 JavaScript 对象中逐一进行分析，然后显示模板。

我唯一需要的本地数据是页码。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

对于 props 来说，数据是必要的，另外我还定义了 size 这个参数来保存每一页数据的数量的最大值。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

在 methods 中，我定义了下一页和上一页的两个方法：

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

我使用计算属性值来计算一共有多少页：

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData 就是获取过滤后的数据的计算属性：

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

修改：在一开始我使用 .splice 来复制数组，但更完美的做法是使用 .slice 方法，在这里感谢 Alexander Karelas。

在 template 中：

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

我希望在最开始或者最末尾阻止用户按下按钮，对于 prevPage 按钮，我加入了 :disabled="pageNumber=0" 而对于 nextPage 按钮，我加入 :disabled="pageNumber >= pagecount -1"。

下面是该组件的demo：

https://codepen.io/dennythecoder/pen/aEwdP...

事情有时可能很容易过时，但分页是一项非常简单的功能，我们可以在不付出很多精力的情况下为用户提供便利。

非常感谢你的阅读！

Denny Headrick 是美国空军的 Web 开发人员，他喜欢他的工作方式。 除了在各种平台和 Vue.js 上进行开发之外，他还喜欢偶尔发表博客。 你可以在 @dennythecoder 的 Twitter 上关注他。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://medium.com/@denny.headrick/pagin...

译文地址：https://learnku.com/vuejs/t/23290/using-...