elementplus分页加载数据

Element Plus是一个基于Vue.js的开源UI组件库，它提供了一套丰富的界面元素和功能，包括分页加载数据的功能。在Element Plus中，分页通常通过`el-pagination`组件来实现。这个组件允许你在列表页面中添加分页控制，比如上一页、下一页、总页数以及每页显示的数量等。

使用`el-pagination`的基本步骤如下：

1. 引入组件：首先需要在模板文件中导入`el-pagination`组件，例如：

   <template>
     <div>
       <!-- ...其他内容 -->
       <el-pagination :total="totalCount" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
       <!-- ...其他内容 -->
     </div>
   </template>

2. 数据绑定：设置`total`属性为总数据量，`current-page`属性表示当前页码，`@current-change`则是当页码改变时触发的事件处理函数。

3. 定义方法：创建一个方法如`handleCurrentChange`来处理页码变化，并从服务器获取对应页的数据。

<script>
export default {
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      itemsPerPage: 10, // 每页显示项数
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      // 根据新的页码请求并更新数据
      this.fetchData(this.currentPage);
    },
    fetchData(page) {
      // 这里通常是异步操作，实际项目中应替换为你的API请求
      axios.get(`/api/data?page=${page}&limit=${this.itemsPerPage}`).then(response => {
        this.totalCount = response.data.total; // 更新总数据量
        this.currentItems = response.data.data; // 获取并设置当前页的数据
      });
    },
  },
};
</script>