iview select 数据项大于500以上时路由跳转很慢

Question

版本：
"vue": "^2.2.2"
"iview": "^2.0.0-rc.15"

大家好，我现在在用iview开发后台系统，遇到Select组件数据项大于500以上时路由跳转很慢的问题。慢的时候要15秒以上才能跳转。后来尝试用了element ui，发现在也需要2秒左右的时间跳转。

请问Select 组件在数据量比较大的时候怎么处理才好降低跳转切换时间？

Answer 1

iview和element UI都是一个毛病

每个选项都是一个组件，每个选项还要绑定若干事件。
你这500个以上的选项，也就是说光是这个Select就有500个以上的组件，每个组件下属的DOM元素还被绑定若干事件，渲染起来当然超级慢。

我之前也碰到了这个问题，答案是除非你这个Select不要用iview或者element UI，否则毫无办法。
我是针对选项太多的Select单独写了个组件，当然样式风格是仿照iview的，毕竟风格要保持一致，但是其内部的业务逻辑和iview完全不同，做了很多针对性的优化。

Answer 2

可以尝试将数据分组，然后使用连级选择来选择数据。

Answer 3

一次请求很多数据当然会很慢，你可以分页显示啊。

Answer 4

用tree组件时有4000节点，基本处于卡死状态，没办法改成点击才加载了。

select组件跳转，既然500节点，一次性展示应该也不是很友好，可以考虑带搜索的select，每次根据搜索值返回固定50或者100个，就是增加了后端逻辑。

Answer 5

我的页面用到了select和tree,数据量在1600条,导致在页面跳转的时候总是延迟几秒,找了很多原因找到这里,发现都有这个问题.
我在想,既然是页面挑战,为什么还会有那么多的mutation呢? 应该直接销毁或者保留原来的状态,这样不是更好?