elementplus分页怎么使用

Element Plus 提供了一个名为 `ElPagination` 的分页组件，可以很方便地实现分页功能。下面是一个简单的使用示例：

1. 安装 Element Plus：

npm install element-plus --save

2. 在需要使用分页的组件中引入 `ElPagination`：

<template>
  <div>
    <!-- 显示数据列表部分 -->
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.title }}</li>
    </ul>
    <!-- 分页部分 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

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

export default {
  components: {
    ElPagination,
  },
  data() {
    return {
      dataList: [
        { id: 1, title: '文章1' },
        { id: 2, title: '文章2' },
        { id: 3, title: '文章3' },
        { id: 4, title: '文章4' },
        { id: 5, title: '文章5' },
        { id: 6, title: '文章6' },
        { id: 7, title: '文章7' },
        { id: 8, title: '文章8' },
        { id: 9, title: '文章9' },
        { id: 10, title: '文章10' },
      ],
      currentPage: 1,
      pageSize: 5,
      total: 10,
    };
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

在上面的示例中，我们引入了 `ElPagination` 组件，并在 `data` 中定义了 `dataList`、`currentPage`、`pageSize` 和 `total` 四个变量。其中，`dataList` 是要显示的数据列表，`currentPage` 是当前页码，`pageSize` 是每页显示的数据条数，`total` 是总数据条数。

在模板中，我们先显示了数据列表部分，然后使用 `ElPagination` 组件实现了分页功能。我们将 `currentPage`、`pageSize` 和 `total` 三个变量绑定到了 `ElPagination` 组件的相应属性上，并监听了 `current-change` 事件，当用户切换页码时，会触发 `handleCurrentChange` 方法，该方法会更新 `currentPage` 变量的值，从而更新数据列表。

需要注意的是，`ElPagination` 组件中的 `current-page` 属性和 `@current-change` 事件都是必须的，否则分页功能将无法正常工作。

希望这个示例能够帮助你快速上手 Element Plus 的分页功能。