实现的功能：当查询条件变更时，要重置页数为1，将数据清空
方案列表
- 最简单直接的方式就是，点击查询按钮重置页数为1
// 查询列表
async queryTable(noRest) {
const res = await queryInventory(this._fmtParams(noRest));
this.tableData = res.data.list;
this.paginationInitial.total = res.data.total;
},
// 分页变动
paginationChanged({ page, size }) {
this.paginationInitial.page = page;
this.paginationInitial.size = size;
this.queryTable(true);
},
// 格式化请求数据
_fmtParams(noRest) {
// 参数格式化, 统一管理查询条件
const params = {
page_index: this.paginationInitial.page,
rows_per_page: this.paginationInitial.size,
ds_sequence: 2,
...this.filterData
};
// 当查询条件发生变化, 重置查询页数和数据 - 忽略字段：更多方案详见 https://www.jianshu.com/p/435ea5cfa609
if (!noRest) {
this.tableData = [];
this.paginationInitial.total = 0; // 查询前重置数据: 总数为0, page会置为1
this.paginationInitial.page = 1; // 重置页数
}
return params;
}
- 不建议使用 wartch 结合 deep 来实现，参数并非都在一个对象内，且watch成本相对较高
- 比对两次查询参数，忽略掉分页page和size，若参数方式变更则重置数据和页数
3.1 关联数据
data() {
return {
// 表数据
tableData: [],
// 分页初始值
paginationInitial: {
page: 1,
size: 10,
total: 0
},
// 查询条件
filterData: {
whcode_begin: "", // 仓库编码起始
whcode_end: "", // 仓库编码结束
whname: "", // 仓库名称
invcode_begin: "", // 存货编码起始
invcode_end: "", // 存货编码结束
invname: "" // 存货名称
},
// 历史参数记录: 比对参数是否变更, 重置查询页数和数据
paramsPrevious: {}
};
}
3.2 参数比对
// 格式化请求数据
_fmtParams() {
const ignoreArr = ["page_index", "rows_per_page"];
// 参数格式化, 统一管理查询条件
const params = {
[ignoreArr[0]]: this.paginationInitial.page,
[ignoreArr[1]]: this.paginationInitial.size,
ds_sequence: 2,
...this.filterData
};
// 当查询条件发生变化, 重置查询页数和数据 - 忽略字段：更多方案详见 https://www.jianshu.com/p/435ea5cfa609
const keys = Array.from(
new Set([...Object.keys(data), ...Object.keys(this.paramsPrevious)])
).filter(key => !ignoreArr.includes(key));
const noRest = keys.every(key => this.paramsPrevious[key] == data[key]);
this.paramsPrevious = { ...data }; // 记录历史参数
if (!noRest) {
this.tableData = [];
this.paginationInitial.total = 0; // 查询前重置数据: 总数为0, page会置为1
this.paginationInitial.page = 1; // 重置页数
}
return params;
}
这只是提供了一个实现方案，若是查询没有很高要求，使用
点击查询按钮重置页数为1最佳
