后台系统+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: 0,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 更新分页后从第一页开始
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 这里调用后端API获取数据，然后更新total
      // 假设getData是用来获取数据的函数
      getData(this.currentPage, this.pageSize).then(response => {
        this.total = response.data.total;
      });
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

这个代码实例展示了如何在Vue.js和Element UI中实现分页器功能。其中，handleSizeChange和handleCurrentChange方法用于处理页面大小改变和页面跳转的事件，并且更新数据。fetchData方法用于获取后端数据，并更新total和data以反映当前页面的数据。在组件被创建时，fetchData会被调用以加载初始数据。