首页 > 解决方案 > 用大数据过滤列表 - VueJs

问题描述

我使用来自https://github.com/freearhey/vue2-filters的 filterBy 过滤器。该列表有大约 5,000 条记录。例如,当我按一个字母时,“a”过滤大约需要 10 秒。当我输入一个较长的短语时,大约需要一秒钟。有没有什么办法可以加快对这么大列表中单个字母的过滤?

标签: javascriptvue.jsvuex

解决方案


我认为问题不在于列表过滤,正如Evaldo指出的那样,Vue 只是在渲染大量组件时遇到了困难。

还可以考虑用filterBy您自己的过滤器实现替换。filterBy考虑了很多事情,包括列表类型和附加参数。你需要一个最低限度。制作数组过滤器的快速方法是

 filters: {
    filterBy: (list, searchTerm) => {
      if (!searchTerm) return list;
      return list.filter(x => x.find(searchTerm) !== -1);
    },
  },

推荐阅读