Vue3实现elementplus实现分页查询，组合式API写法

在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>

注意：

1. 在<script setup>语法中，我们使用了Vue 3的组合式API，如ref和onMounted。
2. fetchData函数模拟了从后端API获取数据的操作。在实际应用中，你应该替换这个函数以调用真实的API。
3. 我们通过监听size-change和current-change事件来分别处理每页显示条数的改变和当前页码的改变。
4. 使用ref来创建响应式的数据，如currentPage、pageSize、total和tableData。
5. onMounted生命周期钩子用于在组件挂载后立即加载第一页的数据。

这样，你就完成了一个基本的分页查询功能的实现。