element ui 下一页

在 Element UI 中实现下一页功能可以使用 Pagination（分页）组件。你可以在模板中使用 Pagination 组件，然后设置总条数和每页显示的条数。当用户点击下一页按钮时，你可以监听 Pagination 组件的 current-change 事件，然后在事件处理函数中调用接口获取下一页的数据，最后更新显示的数据即可。

以下是一个使用 Element UI Pagination 组件实现下一页功能的示例代码：

<template>
  <div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      dataList: []
    };
  },
  methods: {
    handleCurrentChange(currentPage) {
      // 调用接口获取下一页数据
      // 假设接口地址为 /api/getData
      axios.get('/api/getData', {
        params: {
          page: currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.dataList = res.data.list;
      });
    }
  }
};
</script>

在上面的代码中，我们首先定义了一个 Pagination 组件和一个用于显示数据的 ul 元素。然后在 data 中定义了 currentPage、pageSize、total 和 dataList 四个变量，分别表示当前页码、每页显示的条数、总条数和当前页的数据列表。在 methods 中定义了一个 handleCurrentChange 方法，该方法会在用户点击下一页按钮时被调用。在 handleCurrentChange 方法中，我们通过调用接口获取下一页数据，并将数据更新到 dataList 变量中，从而实现下一页功能。