【最棒的讲解】细说element分页

---

你啥也别管，跟我一起复制粘贴即可。

---

第一步：在html中复制下面的分页组件代码

分页必不可少的五个因素

image.png

下方代码自取：

---

---

第二步：在data中定义分页对象

定义分页所用的对象，里面是分页必备属性

return {  
      pageData: {     // 用于分页请求的 obj 
        currentPage: 1,  //当前页
        pageSize: 10,   // 一页放多少数量
        total: 0 //   总共数据量
      },
}

---

---

第三步：在methods中定义分页触发的方法

分页改变时触发的方法：【@current-change="handleCurrentChange" 】

handleCurrentChange(index) {
      this.pageData.currentPage = index;
      this.weatherInit();
}

***************其中【weatherInit()】初始化方法是我自己请求数据的方法，你按照你的来***************请求数据代入分页的参数：

image.png

weatherInit() {
      WeatherAPI.getWeatherPcData(
        this.url + this.curVersion ,
        this.obj,
         this.pageData.currentPage,   // 当前页
        this.pageData.pageSize   //  一页展示的数据
      ).then(res => {
        this.tableData = res.data.data.records;     // 获取总表格数据
        this.pageData.total = res.data.data.total;  // 总共数据的条数
      });
},

【另】如果有一个搜索函数的话，记得触发后在里面把当前页返回为第一页

 search(){
      this.pageData.currentPage = 1;  //回到第一页
      this.weatherInit()
    },