el-pagination vue3分页

el-pagination是一个基于element-ui的分页组件，用于在Vue3应用程序中实现分页功能。它可以帮助您轻松地管理和展示大量数据，并提供一些自定义选项以适应不同的需求。

使用el-pagination非常简单。首先，您需要在Vue组件中导入el-pagination组件，并在template中使用它：

<template>
  <div>
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

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

export default {
  components: {
    ElPagination,
  },
  setup() {
    const total = ref(100); // 数据总数
    const pageSize = ref(10); // 每页显示数量
    const currentPage = ref(1); // 当前页码

    const handleCurrentChange = (page) => {
      currentPage.value = page;
      // 处理当前页码变化的逻辑
    };

    return {
      total,
      pageSize,
      currentPage,
      handleCurrentChange,
    };
  },
};
</script>

在上面的示例中，我们定义了三个响应式变量：total、pageSize和currentPage，它们分别表示数据总数、每页显示数量和当前页码。我们还定义了一个处理当前页码变化的方法handleCurrentChange，它会在页码发生变化时被调用。

在template中，我们使用el-pagination组件，并将total、pageSize和currentPage分别绑定到组件的属性中。我们还监听了current-change事件，当页码变化时，会触发handleCurrentChange方法。

通过这种方式，我们就可以在Vue3应用程序中使用el-pagination组件实现分页功能了。您可以根据实际需求调整total、pageSize和currentPage等参数，以及自定义组件的样式和功能。