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

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

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

啥也不说了，先去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()）也行