- A page has a table table with a lot of data and a search box. When you click to search, you can filter, but when you click on the next page, the data becomes all data, and the paging changes .
- the following is the data filtered when clicking search
3.
js
export default {
data() {
return {
botanyData: [],
activeName2: "first",
query: {
pageNum: 1,
pageSize: 10,
currentPage: 1,
recordCount: 0
},
seek: {
familyName: "",
speciesName: "",
genusName: ""
},
familyName: "",
speciesName: "",
genusName: ""
};
},
methods: {
//
wildPlantData() {
this.$http
.get(this.$api.wildPlant, {
params: { pageNum: this.query.currentPage }
})
.then(res => {
if (res.status == 200) {
this.botanyData = res.data.data.pageBean.recordList;
this.query.recordCount = res.data.data.pageBean.recordCount;
this.query.pageSize = res.data.data.pageBean.pageSize;
this.query.currentPage = res.data.data.pageBean.currentPage;
} else {
throw res.message;
}
})
.catch(err => {
console.log("wildPlantData", err);
});
},
//
queryData() {
this.seek.familyName = this.familyName;
this.seek.speciesName = this.speciesName;
this.seek.genusName = this.genusName;
this.$http
.get(this.$api.wildPlant, { params: this.seek })
.then(res => {
if (res.status == 200) {
this.botanyData = res.data.data.pageBean.recordList;
this.query.recordCount = res.data.data.pageBean.recordCount;
this.query.pageSize = res.data.data.pageBean.pageSize;
this.query.currentPage = res.data.data.pageBean.currentPage;
} else {
throw res.message;
}
})
.catch(err => {
console.log("queryData", err);
});
},
//
handleSizeChange(val) {},
handleCurrentChange(pageNum) {
this.query.currentPage = pageNum;
this.wildPlantData();
}
},
created() {
this.wildPlantData();
this.queryData();
}
};