Vue 中如何使用分页

红太狼 2020-06-18 15:45 998阅读 0赞

# Vue 中如何使用分页

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

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

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

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

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

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

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

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

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

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

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

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

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

在 template 中：

```html
<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"。