你啥也别管，跟我一起复制粘贴即可。
第一步：在html中复制下面的分页组件代码
分页必不可少的五个因素
image.png
下方代码自取：
<el-pagination
background
:model="pageData"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-size="pageData.pageSize"
:total="pageData.total"
layout="total, prev, pager, next, jumper">
</el-pagination>
第二步：在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()
},
