vue3+element ui请求分页

以下是使用Vue3和Element UI实现分页的示例代码：

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElPagination } from 'element-plus';

export default {
  components: {
    ElPagination,
  },
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

    function handleCurrentChange(val) {
      currentPage.value = val;
      fetchData();
    }

    function handleSizeChange(val) {
      pageSize.value = val;
      currentPage.value = 1;
      fetchData();
    }

    function fetchData() {
      // 在这里发起请求获取分页数据
      // 请求参数包括 currentPage.value 和 pageSize.value
      // 请求成功后更新 total.value 和分页数据
    }

    fetchData();

    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,      handleSizeChange,
    };
  },
};

在这个示例中，我们使用了Vue3的Composition API来管理组件状态。我们使用了`ref`函数来创建响应式变量，这些变量包括当前页码、每页显示的条目数和总条目数。我们还使用了Element UI的`ElPagination`组件来渲染分页器，并监听了`current-change`和`size-change`事件来处理页码和每页显示条目数的变化。在`handleCurrentChange`和`handleSizeChange`函数中，我们更新了当前页码和每页显示条目数，并重新发起了请求获取分页数据。在`fetchData`函数中，我们可以发起请求获取分页数据，并更新总条目数和分页数据。