为了账号安全,请及时绑定邮箱和手机立即绑定

vue 关于搜索、列表、分页的最佳实践?

/ 猿问

vue 关于搜索、列表、分页的最佳实践?

手掌心 2019-02-05 19:46:03

假设现在有一种场景是有一个图书的列表,但是图书实在是太多了,所以在这个页面中,必须将图书以分页的形式展示出来。

在这种情况下还需要一个搜索的功能,帮助用户快速找到图书。

所以界面看起来有点像这样:

https://img.mukewang.com/5c59779100012d7e03680290.jpg

这里也许还会有一些条件:

  • 每一个页面的数据都会被缓存起来,也就是来回点跳到第一页和第二页不会发送很多次请求;

  • 正如上一点所说的,数据并不会被一次性加载,也就是当你看到第一页时,前端并不知道后面的页面的数据;

  • 搜索功能的搜索范围是基于所有数据的搜索,而不是基于当前页的搜索过滤,例如现在显示的是第一页,搜索的结果有可能是来自于后面几页的内容。

我现在头脑里面有两种做法,但总觉得不够好:

  1. 无论是搜索结果还是原始的列表结果,都使用同一个组件渲染,在 vm 中定义这三个概念:

    • data.rawList : 用于记录图书列表

    • data.searchList : 用于记录搜索的结果列表

    • computed.displayList : 用于真实显示在组件上的数据列表(根据是否正在搜索判断使用上面哪一项数据)

  2. 将搜索结果和原始的列表用两个组件分开渲染,使用 v-if 来判断显示哪一个列表。

所以想请教一下大家,怎么样做才更加合适?


查看完整描述

目前暂无任何回答

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信