Vue前端：解决使用filter过滤器对数据结果进行过滤显示，过滤结果可能在前几页，即页码不会自动回到第一页开始显示的问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题解析

在我之前的一篇文章中，介绍了几种搜索框的实现方式，具体可以参考以下链接：Vue前端：几种搜索框功能实现

在这篇文章介绍了一种搜索方法，即向后台发送请求时获取全部数据，然后在前端用filter过滤器对后端的返回数据进行显示。

这种方法的好处在于，不用多次请求后端，前后端交互一次即可达到目的；同时，在前端用filter过滤器的对数据进行过滤显示，前端页面的响应也很快，用户可以每输入一个字符，前端就可以显示出含该字符的数据内容，不用等待前后端响应。

这种搜索方法实质是一种“假搜索”，本质是根据输入的内容对数据进行过滤展示。

但是这种方法的缺点也很明显，就是如果后端数据量很大，一次请求获得全部数据就明显不现实，因此这种搜索只适用于数据量较小的系统中。

用filter过滤器还会带来一个问题，就是用户在搜索框中输入内容的时候，前端页面的显示内容会改变，但是底部的页码不会变，因此搜索的结果可能出现在前几页而不是当前页，用户还需要点击前面的页码去找想要的结果在哪一页。

这个问题虽然并不会影响最终的使用目的，但是会极大的影响用户体验，因此本文介绍了一种解决该问题的办法。

二、解决方案

1.方案原理

问题表现：页码不会自动回到第一页，仍然停留在当前页，导致搜索结果可能出现在前几页，用户还需要去前几页找。

解决思路：每次过滤显示后，页面显示的内容都应该从第一页开始显示，即从所有筛选出来的数据的第一条开始显示，页码回到第一页

因此，当搜索框中的内容发生改变，需要开始过滤显示内容时，就要让页码回到第一页，从所有筛选出来的数据的第一条开始显示。

2.解决代码

思路清晰后问题就很好解决了，具体代码如下：

result_Lists() {
<!--检查搜索框中的内容是否发生改变，如果改变就要从包含搜索内容的第一条数据开始显示，同时页码回到第一页 -->
   if(this.searchContent!=this.searchOldContent){
     this.pageNo=1;
     this.searchOldContent=this.searchContent;
   }
   let start = (this.pageNo - 1) * this.pageSize;
   let end = start + this.pageSize;
   return this.result.filter(item =>
   (item.xm && item.xm.includes(this.searchContent)) ||
   (item.bm && item.bm.includes(this.searchContent)) 
   ).slice(start, end);
},

---

总结

本文介绍了如何解决用filter过滤器可能会带来的一个问题：用户在搜索框中输入内容的时候，前端页面的显示内容会改变，但是底部的页码不会变，因此搜索的结果可能出现在前几页而不是当前页，用户还需要点击前面的页码去找想要的结果在哪一页。

核心解决思路就是每次过滤后都要从所有满足筛选出来的数据的第一条开始显示，同时页码回到第一页。

这种解决办法只是自己能想到的一个办法，还有很多别的办法，欢迎大家探讨交流。
希望对大家有用！