vue表格查询完美的优化(原来我们平时写的都有bug！！)

1）平时我们写表格查询的时候

let params = {
  search: '',
  size:  10,
  page:  1
}
//点击查询的按钮
search() {
  params.page = 1
  this.getList() // 表格列表的请求函数
}

//当我们点击分页 页码改变 的时候也要重新调用表格列表的请求函数请求第二页的数据

2）优化1

以上查询请求优化：
1.当我们查询input框输入内容，且我们没有点击查询按钮，
  我们点击了第二页，此时会发现第二页的数据为空，原因是我们携带了查询的参数

解决办法：
let params = {
  size:  ...
  page:  ..
}

//点击查询的按钮
search() {
  this.data = this.search  //搜索条件
  this.getList(data)  // 表格列表的请求函数 (点击查询按钮的时候把查询条件传过去)
}

以上查询请求优化：
2.如果我是第二次输入不点搜索，但是改变了输入的内容 点击分页，
应该回显的是输入内容前的那个内容，
所以我们点击分页的时候给把保存到data中的内容做一次回显

3）最终优化

此代码是基于vue2+ant-design实现的，语法可查组件库官网
// 点击查询
clickLookFor() {
  const searchParams = this.form.getFieldsValue();  // ******
  this.templateSearchParama = searchParams;  //暂存输入框的内容 ******
  this.pagination.current = 1;
  this.reqlist();  / ******
},
// 点击清空按钮
handleReset() {
  this.form.resetFields();
  this.pagination.current = 1;
  this.templateSearchParama = {};  // ******
  this.reqlist();   // ******
},
// 列表请求
reqlist() {
  let params = {
    page: this.pagination.current,
    pageSize: this.pagination.pageSize,
  };
  const searchParams = this.templateSearchParama; // ******
  for (let key in searchParams) {
    if (searchParams[key]) {
      params[key] = searchParams[key];
    }
  }
  reqlist(params).then((res) => {
     if (res.code === 0) {
          this.loading = false;
          console.log(res);
          const data = res.data.data;
          this.dataSource = data;
          const total = res.data.total;
          this.pagination.total = total;
        }
 });
},
//页码发生变化
onChange(pagination) {
  this.form.setFieldsValue(this.templateSearchParama); //input框回显上次输入的内容 ******
  this.pagination = pagination;
  this.reqlist();  // ******
},

总结：以上就没问题了，有什么更好的优化或者有问题欢迎评论区留言~