Environment
Windows 7 / 谷歌浏览器版本 75.0.3770.100(正式版本) (64 位)/vue2
Reproduction link
https://run.iviewui.com/uUsDu5xU
Steps to reproduce
如链接所示,点击箭头进行收拢或者展开parent 1,会等待一段时间才能正常收拢/展开
What is expected?
期望的是点击展开的时候不需要重新渲染节点了,用户的等待时间尽量缩短
What is actually happening?
parent 1 下有三百多个直接子节点时,点击展开和收拢parent 1的时候反应很慢
我认为渲染树只要渲染一次就够了,不需要在点击展开的时候重新进行一模一样的渲染,渲染的过程是会耗费一定的时间的。而我的自定义树内容是不变的,所以我期望的是展开的时间要很快。
8条答案
按热度按时间xdnvmnnf1#
收起展开的动画会消耗掉一些时间, 可以将node.vue的collapse-transition去掉试试
或许应该加个选项让开发者自己决定要不要动画效果
ohfgkhjo2#
动画会消耗掉一些时间,但是我这里的耗时不是动画产生的。耗时的原因是每展开/收拢节点就会重新渲染该节点下所有的子节点。
可以访问 https://run.iviewui.com/oC1eHNiC链接,然后打开控制台,展开/收拢节点都会有输出,说明每次展开/收拢节点都执行了renderContent方法,执行这个方法就会重新渲染子节点,就会耗时
polhcujo3#
最近遇到了,render渲染多节点就会出问题,当修改数据时就会重新走render,性能很差。建议使用slot重写下tree得render
ovfsdjhp4#
数据量较大时,使用tree提供的render渲染特别卡顿,有解决方案吗
ej83mcc05#
我也遇到类似的问题,请问有解决方案吗?
cu6pst1q6#
我也遇到类似的问题,请问有解决方案吗?
在源码的iview/src/components/tree/node.vue中,是根据节点的data.expand属性值来进行v-if渲染,所以每次展开、收拢节点时都会重新执行内容渲染到页面,所以也就重新执行了render函数。
如果要实现展开、收拢节点不重新渲染。
个人认为需要在源码中进行使用v-show条件来扩充,添加一个props来表示展开、收拢节点时启用v-show而不是使用v-if。
@DebugIsFalse
6qftjkof7#
使用的项目3000多个节点,直接卡死
qgelzfjb8#
使用的项目3000多个节点,直接卡死
可以使用vue收集的相关tree的组件来实现功能
地址:https://github.com/vuejs/awesome-vue#tree