【最棒的讲解】细说element分页
你啥也别管，跟我一起复制粘贴即可。 第一步：在html中复制下面的分页组件代码
分页必不可少的五个因素
文章图片
image.png 【【最棒的讲解】细说element分页】下方代码自取：
第二步：在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 = https://www.it610.com/article/res.data.data.records;
// 获取总表格数据
this.pageData.total = res.data.data.total;
// 总共数据的条数
});
},
【另】如果有一个搜索函数的话，记得触发后在里面把当前页返回为第一页
search(){
this.pageData.currentPage = 1;
//回到第一页
this.weatherInit()
},
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 宽容谁
- 我要做大厨
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。