在 Vue 中使用分页

前端  /  管理员 发布于 6年前   189

分页功能通过允许用户以较小的块或页面可视化数据来增强用户体验。 下面介绍如何创建带分页的 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"。

推荐教程：《JS教程》

以上就是在 Vue 中使用分页的详细内容，更多请关注其它相关文章！