在Vue 3中使用Element Plus实现分页查询时,通常会利用组合式API(Composition API)来组织代码,使得逻辑更加清晰和模块化。以下是一个基本的示例,展示了如何在Vue 3项目中结合Element Plus的分页组件和组合式API来实现分页查询功能。
首先,确保你的项目中已经安装了Vue 3和Element Plus。
然后,在你的Vue组件中,你可以这样编写代码:
<template>
<div>
<!-- 数据列表展示区域 -->
<div v-for="item in tableData" :key="item.id">
{{ item.name }}
</div>
<!-- 分页组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElPagination } from 'element-plus';
// 假设这是从后端API获取数据的函数
async function fetchData(page, pageSize) {
// 这里应该是真实的API调用,这里用模拟数据代替
const mockData = Array.from({ length: pageSize }, (_, k) => ({
id: (page - 1) * pageSize + k + 1,
name: `Item ${(page - 1) * pageSize + k + 1}`
}));
return {
data: mockData,
total: 100 // 假设总条数是100
};
}
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
// 处理每页显示条数改变
const handleSizeChange = (newSize) => {
pageSize.value = newSize;
fetchData(currentPage.value, newSize).then(({ data, total }) => {
tableData.value = data;
total.value = total;
});
};
// 处理当前页码改变
const handleCurrentChange = (newPage) => {
currentPage.value = newPage;
fetchData(newPage, pageSize.value).then(({ data }) => {
tableData.value = data;
});
};
// 组件挂载后加载第一页数据
onMounted(() => {
fetchData(currentPage.value, pageSize.value).then(({ data, total }) => {
tableData.value = data;
total.value = total;
});
});
</script>
<style scoped>
/* 你的样式 */
</style>
注意:
- 在
<script setup>
语法中,我们使用了Vue 3的组合式API,如ref
和onMounted
。 fetchData
函数模拟了从后端API获取数据的操作。在实际应用中,你应该替换这个函数以调用真实的API。- 我们通过监听
size-change
和current-change
事件来分别处理每页显示条数的改变和当前页码的改变。 - 使用
ref
来创建响应式的数据,如currentPage
、pageSize
、total
和tableData
。 onMounted
生命周期钩子用于在组件挂载后立即加载第一页的数据。
这样,你就完成了一个基本的分页查询功能的实现。