vue3使用分页
时间: 2023-07-09 07:09:24 浏览: 50
Vue 3 中使用分页可以使用第三方库,例如 vue-pagination-3。以下是使用该库的示例代码:
1. 安装 vue-pagination-3:
```
npm install --save vue-pagination-3
```
2. 引入和注册 Pagination 组件:
```javascript
import Pagination from 'vue-pagination-3';
export default {
components: {
Pagination
},
data() {
return {
currentPage: 1,
itemsPerPage: 10,
totalItems: 100
}
}
}
```
3. 在模板中使用 Pagination 组件:
```html
<pagination
:current-page="currentPage"
:items-per-page="itemsPerPage"
:total-items="totalItems"
@page-changed="onPageChanged"
></pagination>
```
其中,`currentPage` 表示当前页码,`itemsPerPage` 表示每页显示的条数,`totalItems` 表示总共的条数。`@page-changed` 监听页码变化事件,可以在回调函数中处理分页逻辑。
完整的示例代码如下:
```vue
<template>
<div>
<ul>
<li v-for="item in displayedItems" :key="item.id">{{ item.data }}</li>
</ul>
<pagination
:current-page="currentPage"
:items-per-page="itemsPerPage"
:total-items="totalItems"
@page-changed="onPageChanged"
></pagination>
</div>
</template>
<script>
import Pagination from 'vue-pagination-3';
export default {
components: {
Pagination
},
data() {
return {
currentPage: 1,
itemsPerPage: 10,
totalItems: 100,
items: [
{ id: 1, data: 'item 1' },
{ id: 2, data: 'item 2' },
{ id: 3, data: 'item 3' },
// ...
{ id: 100, data: 'item 100' }
]
}
},
computed: {
displayedItems() {
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return this.items.slice(startIndex, endIndex);
}
},
methods: {
onPageChanged(newPage) {
this.currentPage = newPage;
}
}
}
</script>
```
上述代码中,`items` 数组中存放了需要分页的数据,`displayedItems` 计算属性根据当前页码和每页显示的条数计算出需要显示的数据。在 `onPageChanged` 方法中,更新当前页码,从而触发 `displayedItems` 的重新计算。