el-pagination

El-pagination是一个基于Element UI的分页组件，用于在前端实现数据分页展示。它提供了一系列的API和配置选项，可以方便地控制分页的显示样式和行为。

使用el-pagination，你可以通过指定总数、每页显示数量等参数来设置分页的基本信息。同时，它还提供了事件回调函数，例如点击页码、改变每页显示数量等，以便你可以根据需要进行相应的操作。

可以通过以下代码来创建一个基本的el-pagination分页组件：

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      // 根据新的pageSize重新请求数据
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      // 根据新的currentPage重新请求数据
    },
  },
};
</script>

这个例子中，我们设置了默认的currentPage为1，pageSize为10，total为100。用户可以通过选择每页显示数量和点击页码来改变当前页和每页显示数量，通过调用相应的事件回调函数，在回调函数中可以根据新的currentPage和pageSize重新请求数据。

当然，你还可以根据实际需求来自定义el-pagination的样式和行为，例如自定义翻页按钮、设置分页显示的位置等。具体的使用方式和配置选项可以参考Element UI的官方文档。