element-ui 筛选条件变更重置页数和数据，Table

实现的功能：当查询条件变更时，要重置页数为1，将数据清空

方案列表

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;
    }

2. 不建议使用 wartch 结合 deep 来实现，参数并非都在一个对象内，且watch成本相对较高

---

3. 比对两次查询参数，忽略掉分页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 最佳