完整分页器最骚的讲解（亲测）

咱也不敢问，咱也不敢说。先来个图瞅瞅分页器是个什么鬼叭

就目前来讲，这应该算是功能最全的分页器啦吧

下面我们一步一步研究一下这玩意怎么玩叭

啥也不说了，先去element-ui官网嫖代码吧哈哈哈

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>

宝贝们应该注意到了最上面的两个@了吧。。没错，这是两个点击事件。我们也去把他的方法嫖下来吧

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }

接下来我们就先了解了解他的身体结构吧

@size-change：pageSize 改变时会触发，就是点击你想看的那一页
@current-change：currentPage 改变时会触发，就是点击选择页面中显示几条数据
:current-page：当前页数
:page-sizes：每页显示个数选择器的选项设置
:page-size：每页显示条目个数
layout：组件布局，子组件名用逗号分隔
:total：总条目数

然后在给他动个小小的手术，略微修改让他更容易看得懂啦

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="info.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="info.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

  data() {
    return {
      // 当前页数，显示数目
      info: {
        pagenum: 1,
        pagesize: 5,
      },
      // 总数目
      total: 0,
    }
  },

  methods: {
    // 当前点击的页面 点击事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // 进行赋值 val是默认传回来的参数，是我们当前点击的那一页数字
      this.info.pagesize = val
      // 调用获取数据的函数
      this.getTableData()
    },
    // 每页条数选择的 点击事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 进行赋值 val是默认传回来的参数，是我们当前点击的那个数字，就是要显示的条数
      this.info.pagenum = val
      // 调用获取数据的函数
      this.getTableData()
    },
  },

好的，到这里我们就可以去自己的项目中写一个这样的分页器啦，直接复制上面代码，然后改一下调用获取数据的函数即可，一般情况接口中给了我们总条数的total数据，没有的话就用数据个数（data.length()）也行