版本:"vue": "^2.2.2""iview": "^2.0.0-rc.15"
大家好,我现在在用iview开发后台系统,遇到Select组件数据项大于500以上时路由跳转很慢的问题。慢的时候要15秒以上才能跳转。后来尝试用了element ui,发现在也需要2秒左右的时间跳转。
请问Select 组件在数据量比较大的时候怎么处理才好降低跳转切换时间?
iview和element UI都是一个毛病
iview
element UI
每个选项都是一个组件,每个选项还要绑定若干事件。 你这500个以上的选项,也就是说光是这个Select就有500个以上的组件,每个组件下属的DOM元素还被绑定若干事件,渲染起来当然超级慢。
Select
DOM
我之前也碰到了这个问题,答案是除非你这个Select不要用iview或者element UI,否则毫无办法。 Select不要用iview或者element UI,否则毫无办法。 我是针对选项太多的Select单独写了个组件,当然样式风格是仿照iview的,毕竟风格要保持一致,但是其内部的业务逻辑和iview我是针对选项太多的Select单独写了个组件,当然样式风格是仿照iview的,毕竟风格要保持一致,但是其内部的业务逻辑和iview完全不同,做了很多针对性的优化。
可以尝试将数据分组,然后使用连级选择来选择数据。
一次请求很多数据当然会很慢,你可以分页显示啊。
用tree组件时有4000节点,基本处于卡死状态,没办法改成点击才加载了。
select组件跳转,既然500节点,一次性展示应该也不是很友好,可以考虑带搜索的select,每次根据搜索值返回固定50或者100个,就是增加了后端逻辑。
iview
和element UI
都是一个毛病每个选项都是一个组件,每个选项还要绑定若干事件。
你这500个以上的选项,也就是说光是这个
Select
就有500个以上的组件,每个组件下属的DOM
元素还被绑定若干事件,渲染起来当然超级慢。我之前也碰到了这个问题,答案是除非你这个
Select
不要用iview
或者element UI
,否则毫无办法。Select
不要用iview
或者element UI
,否则毫无办法。我是针对选项太多的
Select
单独写了个组件,当然样式风格是仿照iview
的,毕竟风格要保持一致,但是其内部的业务逻辑和iview
我是针对选项太多的Select
单独写了个组件,当然样式风格是仿照iview
的,毕竟风格要保持一致,但是其内部的业务逻辑和iview
完全不同,做了很多针对性的优化。可以尝试将数据分组,然后使用连级选择来选择数据。
一次请求很多数据当然会很慢,你可以分页显示啊。
用tree组件时有4000节点,基本处于卡死状态,没办法改成点击才加载了。
select组件跳转,既然500节点,一次性展示应该也不是很友好,可以考虑带搜索的select,每次根据搜索值返回固定50或者100个,就是增加了后端逻辑。