vue3中如何实现数据分页显示
时间: 2024-03-22 07:41:10 浏览: 20
在 Vue 3 中可以通过以下步骤实现数据分页显示:
1. 定义分页需要的参数,如当前页数、每页显示数量、总页数、总记录数等。可以使用 Vue 3 中的响应式数据来保存这些参数。
```javascript
import { reactive } from 'vue';
const pagination = reactive({
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示数量
totalPage: 0, // 总页数
totalRecords: 0, // 总记录数
});
```
2. 在组件中使用分页组件,并传入分页参数和数据源。
```html
<template>
<div>
<ul>
<li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
</ul>
<pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total-page="pagination.totalPage" @page-change="handlePageChange" />
</div>
</template>
<script>
import Pagination from './Pagination.vue';
import { reactive } from 'vue';
export default {
components: {
Pagination,
},
setup() {
const pagination = reactive({
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示数量
totalPage: 0, // 总页数
totalRecords: 0, // 总记录数
});
const data = reactive([
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' },
// ...
]);
const paginatedData = computed(() => {
const startIndex = (pagination.currentPage - 1) * pagination.pageSize;
const endIndex = startIndex + pagination.pageSize;
return data.slice(startIndex, endIndex);
});
function handlePageChange(page) {
pagination.currentPage = page;
}
return {
pagination,
data,
paginatedData,
handlePageChange,
};
},
};
</script>
```
3. 在分页组件中实现页码的显示和分页按钮的点击事件。点击分页按钮时,触发 `page-change` 事件,并传递当前页码。
```html
<template>
<ul>
<li v-if="currentPage > 1">
<a href="javascript:void(0)" @click="handlePageClick(currentPage - 1)">上一页</a>
</li>
<li v-for="page in pages" :key="page" :class="{ active: page === currentPage }">
<a href="javascript:void(0)" @click="handlePageClick(page)">{{ page }}</a>
</li>
<li v-if="currentPage < totalPage">
<a href="javascript:void(0)" @click="handlePageClick(currentPage + 1)">下一页</a>
</li>
</ul>
</template>
<script>
import { computed } from 'vue';
export default {
props: {
currentPage: {
type: Number,
required: true,
},
pageSize: {
type: Number,
required: true,
},
totalPage: {
type: Number,
required: true,
},
},
setup(props, { emit }) {
const pages = computed(() => {
const pageArray = [];
for (let i = 1; i <= props.totalPage; i++) {
pageArray.push(i);
}
return pageArray;
});
function handlePageClick(page) {
emit('page-change', page);
}
return {
pages,
handlePageClick,
};
},
};
</script>
```
在上面的代码中,我们使用了 Vue 3 中的响应式数据来保存分页参数和数据源,并使用 `computed` 函数计算出当前页需要显示的数据。在分页组件中,我们根据分页参数和数据计算出需要显示的页码,并在点击分页按钮时,触发 `page-change` 事件,将当前页码传递给父组件。父组件在接收到事件后,更新当前页码,从而实现分页显示。