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

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

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

手掌心 2019-02-05 19:46:03
假设现在有一种场景是有一个图书的列表,但是图书实在是太多了,所以在这个页面中,必须将图书以分页的形式展示出来。在这种情况下还需要一个搜索的功能,帮助用户快速找到图书。所以界面看起来有点像这样:这里也许还会有一些条件:每一个页面的数据都会被缓存起来,也就是来回点跳到第一页和第二页不会发送很多次请求;正如上一点所说的,数据并不会被一次性加载,也就是当你看到第一页时,前端并不知道后面的页面的数据;搜索功能的搜索范围是基于所有数据的搜索,而不是基于当前页的搜索过滤,例如现在显示的是第一页,搜索的结果有可能是来自于后面几页的内容。我现在头脑里面有两种做法,但总觉得不够好:无论是搜索结果还是原始的列表结果,都使用同一个组件渲染,在 vm 中定义这三个概念:data.rawList : 用于记录图书列表data.searchList : 用于记录搜索的结果列表computed.displayList : 用于真实显示在组件上的数据列表(根据是否正在搜索判断使用上面哪一项数据)将搜索结果和原始的列表用两个组件分开渲染,使用 v-if 来判断显示哪一个列表。所以想请教一下大家,怎么样做才更加合适?
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 997 浏览
慕课专栏
更多

添加回答

举报

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