Pagination 分页如何使用

el-pagination 是 Element UI 的一个分页组件，可以用于 Vue.js 项目中。

以下是一个简单的示例，展示了如何使用 el-pagination 分页：

1. 在组件中引入 el-pagination 组件：

<template>
  <div>
    <!-- 你的页面内容 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>

1. 在组件的 data 中定义分页的相关参数：

export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 100, // 总条数
    };
  },
  methods: {
    handlePageChange(currentPage) {
      // 处理页码变化的方法
    },
  },
};

1. 在 handlePageChange 方法中处理页码变化事件，例如可以调用接口获取对应页码的数据：

handlePageChange(currentPage) {
  this.currentPage = currentPage;
  fetchData(this.currentPage, this.pageSize).then((res) => {
    // 更新数据列表
  });
},

其中，fetchData 方法为自定义的获取数据的方法，currentPage 和 pageSize 是 el-pagination 组件传入的参数。

以上是一个简单的 el-pagination 分页示例，你可以根据实际需要自行调整相应的参数和处理方式。