基于elementUI分页组件实现前端分页功能

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 1000, // 假设总数据量为1000
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      // 根据新的每页条数重新加载数据
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 根据新的页码重新加载数据
      this.loadData();
    },
    loadData() {
      // 这里调用API获取分页数据
      // 例如: this.$http.get('/api/data', { params: { page: this.currentPage, pageSize: this.pageSize } })
      //        .then(response => {
      //          this.total = response.data.total; // 更新总数据量
      //          // 处理获取到的数据
      //        });
    }
  }
};
</script>

这个例子展示了如何在Vue.js中使用Element UI的<el-pagination>组件来实现分页功能。handleSizeChange和handleCurrentChange方法用于处理页面大小改变和页面改变的事件，并且调用loadData方法来重新加载数据。注意，你需要替换loadData方法中的API调用为你自己的数据获取逻辑。