Vue.js中的分页

哈Ha！ 我向您展示了Denny Headrick撰写的文章“ Vue.js中的分页 ”的翻译。

分页通过允许用户可视化小块或页面上的数据来增强UX。 因此，可以对Vue.js组件进行分页，这将使我们一次只能查看部分数据。



首先，我将逐段添加到我的JavaScript对象中。 然后我将显示模板

在所有本地数据中，我仅需要数据-页码。

data(){ return { pageNumber: 0 //   0 } } 

对于道具 （属性），数据传输是强制性的，但是我还将采用size参数作为最大记录数。

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

对于我的实现，我将使用方法转到上一页 （上一页）和下一页 （下一页）：

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

一种快速计算的计算属性，用于查找有多少页：

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

现在，计算出的paginatedData 属性是所有内容组合在一起的地方。 这是将显示的过滤数据。

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

社论 ：起初，我做了一些麻烦又麻烦的事情来复制数组。 使用.slice是最好的方法。 谢谢， 亚历山大·卡雷拉斯 。

还有我们的模板

 <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按钮，我将添加：

：禁用=“ pageNumber == 0”

然后为nextPage按钮添加：

：禁用=“ pageNumber> = pagecount -1”

我的组件的工作演示：


有时候很难高估这种情况，但是分页是一项简单的功能，我们可以为用户提供很多帮助。

感谢您的阅读！

Denny Headrick是美国空军的Web开发人员，他对他的工作太喜欢了。 除了在各种平台和Vue.js上开发之外，他还喜欢偶尔写博客。 您可以通过@dennythecoder在Twitter上关注他。