在Vue 3中使用Element Plus实现分页查询时，通常会利用组合式API（Composition API）来组织代码，使得逻辑更加清晰和模块化。以下是一个基本的示例，展示了如何在Vue 3项目中结合Element Plus的分页组件和组合式API来实现分页查询功能。
首先，确保你的项目中已经安装了Vue 3和Element Plus。
然后，在你的Vue组件中，你可以这样编写代码：
javascript"><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生命周期钩子用于在组件挂载后立即加载第一页的数据。
这样，你就完成了一个基本的分页查询功能的实现。
