问题涉及了两个分页的部分,搜索分页和全部数据分页。然而这两个操作都需要进行分页且使用同一个分页组件,所以需要进行区分。
1.首先顶一个变量用来区分搜索与查询全部数据
data() {
pageIsOrNot: false,
}
2.当搜索时需要将这个变量变为True
this.pageIsOrNot = true;
3.实际代码部分:
//搜索部分
search() { //也需要考虑分页的情况
// 执行搜索操作之前需要将currentPage进行初始化,否则可能出现查不到数据的情况
// 其次也需要考虑是否为首次搜索
if(!this.pageIsOrNot) {
this.currentPage = 1;
}
this.$axios({
method: "post",
url: "/comp/supply/search",
// url: "/api/comp/supply/search",
data: {
name: this.searchForm.name,
"currentPage": this.currentPage,
"pageSize": this.pageSize
}
}).then(response => {
const resp = response.data;
this.tableData = resp.data.list;
this.total = resp.data.total;
})
// 将搜索确认参数设为true,表示在搜索状态下的分页
this.pageIsOrNot = true;
},
//分页部分:
//每页显示条数改变时触发
handleSizeChange(val) {
this.pageSize = val;
if(this.pageIsOrNot) { // 判断是那种分页
this.search();
} else {
this.getTableData();
}
},
// 页数改变时触发
handleCurrentChange(val) {
this.currentPage = val;
if(this.pageIsOrNot) { // 判断是那种分页
this.search();
} else {
this.getTableData();
}
},
//加载全部数据部分
//获取列表的数据
getTableData() {
this.pageIsOrNot = false; // 表明此时为加载全部数据
this.$axios({
method: "post",
url: "/comp/supply/suppliers",
// url: "/api/comp/supply/suppliers",
data: {
"currentPage": this.currentPage,
"pageSize": this.pageSize,
}
}).then(response => {
const resp = response.data;
this.tableData = resp.data.list;
this.total = resp.data.total;
})
},