[element plus] 分页组件使用 - vue

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    class="pagination"
    background
    layout="prev, pager, next"
    @current-change="handlePageChange"
  />
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 1000,
    };
  },
  methods: {
    handlePageChange(newPage) {
      // 当前页码发生变化时的回调函数
      // 这里可以发起网络请求，获取新页码的数据
      this.currentPage = newPage;
      // 假设fetchData是获取数据的函数
      // fetchData(newPage, this.pageSize);
    },
  },
};
</script>
 
<style scoped>
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

这个例子展示了如何在Vue应用中使用Element Plus的<el-pagination>组件来实现分页功能。组件的属性current-page、page-size和total分别用于设置当前页码、每页显示条目数和数据总数。handlePageChange方法用于处理页码改变的事件，在这里可以编写获取新页面数据的逻辑。