Element分页器的问题

问题描述

使用分页器对表格里的数据进行分页显示。用户在页面的搜索框中输入了内容，但没有点击搜索，此时应按照无搜索条件进行分页，但是分页器里的参数与搜索条件进行了双向绑定，所以当输入了内容后及使没有点击搜索，点击分页器的页码后也会进行按搜索条件搜索后进行分页.

<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" @pagination="getData" />

data(){
  return{
     queryParams: {
      page: 1,
      projectName: null,
      filter: 0
    },
  }
}

解决办法

问题产生的原因就是数据的双向绑定。这里浅析一下解决方案:

data(){
  return{
     queryParams: {
      page: 1,
      projectName: null,
      filter: 0
    },
    total:0,
    //克隆一个搜索条件
    afterParams: {
      page: 1,
      projectName: null,
      filter: 0
    },
  }
},
methods:{
    //当用户输入了搜索内容，但没有点击搜索时，走正常请求数据,使用getData()获取数据
   async getData(){
       //用克隆的搜索条件进行搜索，但是page要用原来的，因为page绑定了分页器的page
       const res = await xxxx({ ...this.afterParams, page: this.queryParams.page });
       this.list = res.records;
       this.total = res.total;
   },
   //当用户点击搜索时，将搜索条件赋予克隆的搜索对象
    handleQuery() {
      //这里置为1是因为，每次搜索都要从第一页开始
      this.queryParams.page = 1;
      this.afterParams = { ...this.queryParams };
      this.getData();
    },
    ```
    // 重置
    resetQuery() {
      this.queryParams = {
        page: 1,
        query: {
          unitName: null
        }
      };
      this.afterParams = { ...this.queryParams };
      this.getData();
    },
}