Element-UI的条件搜索和分页，关于这方面的众多坑 ------- 如何做一个功能正常的分页

搜索、分页要考虑哪些东西？

单独拿出来一个来说，都是比较简单的，但是结合到一起再配合需求，就会出现种种变化，一不留神就会 ‘中招’ ！

要把 分页 做成 搜索 ！分两个情况进行说明！

注意： 以下情况均以每页10条数据为例。

情况一：搜索出来的数据超过10条，即有多页符合条件的数据。

1）假设用条件 “已审批的订单” 去搜索，结果一共有21条，共3页，此时是在第一页，他代表的是 “已审批的订单” 的1 - 10条。

2）当点击第二页的时候，应该还是要带着条件去搜索的，第二页代表的应该是“已审批的订单”的第11 - 20条。这就要求当在进行分页的时候，要把条件也带着。不然就会导致点击第二页跳转的时候，数据请求的是所有数据的第二页。

注意：要缓存已经查询的参数。如果在搜索栏输入条件 “审批过的订单” ，但是未点搜索，而是直接点第二页，根据日常需求我们不应该带着条件去查询，这点要注意，要注意 ‘缓存’ 已经查询的参数！

做法：首先，当点击搜索的时候，使用 searchMiddleForm 对象去记录查询条件，点击分页的时候，直接把searchMiddleForm对象的值当做参数传给后台即可。注意：后面进行分页跳转的搜索，传入的参数是 searchMiddleForm 的值且只有点击搜索的时候才会记录到searchMiddleForm里面。

示例代码如下：

// 点击搜索时触发的事件
handleSearch () {
      // 获取搜索的值
      const { accountName, name, organization, province, roles } = this.searchForm
      // 记录搜索中间值，为跳转页码用
      this.searchMiddleForm = { accountName, name, organization, province, roles }
      // 设置要传递给后台的参数
      let params = {
        data: {
          accountName,
          name: encrypt(name), // 对用户名字进行aes加密
          organization,
          province,
          roles,
          resourceId: this.resourceId
        },
        pageNum: 1,
        pageCount: 10
      }
      // 调用接口发送请求
      user
        .search(params)
        .then(res => {
            if（res.data.status）{ 
                this.pagination.currentPage = 1 // 不要忘了重置当前页数为第1页
            }
        })
}

 

情况二：可以对数据进行删除操作

如果根据条件搜索出来的数据很多，当点击删除，数据应回到带搜索条件的这一页或者上一页。

1）假设用条件 “已审批的订单” 去搜索，结果一共有21条，共3页，此时是在第三页，第三页只有1条数据他代表的是 “已审批的订单” 的第21条。

2）把这一条删除，此时应展示的为第二页，即 “已审批的订单” 的第11 - 20 条。

这种临界删除的处理方法有很多，这里仅展示2种：

this.pagination 是一个对象，里面包含了所有分页相关的data数据。

this.pagination.total 代表的是 数据总数。

this.pagination.currentPage 代表的是 当前页。

this.pagination.pageSize 代表的是 当前页数据的数量，一般设置为10。

方法一：

handleDelete (row) { 
    user
     .delete({id: row.id})
     .then(res => {
        if (res.data.status) { // 如果删除成功
            this.pagination.total--  // 将数据总数减1
            if (this.pagination.total === 0) { // 判断如果减过后没有数据，那么让当前页为第一页
                 this.pagination.currenPage = 1
            } else {
                 let count = Math.ceil(this.pagination.total / this.pagination.pageSize)
                 if (this.pagination.currentPage > count) {
                    this.pagination.currenPage = count
                 }
            }
        }
     })
}

方法二：

if (tableDate.length <= 1 && this.pagination.currentPage > 1) {
    this.pagination.currentPage --
}
// tableDate为删除之前，数据在当前页的总条数。
// 意思就是，如果我在删除之前发现当前页大于第一页，且条数只有小于或者等于1条，那么我把当前页减1。