问题描述
使用key来控制el-tree的渲染,利用一个 switch 来 控制 el-tree 的 check-strictly 属性,是否保持父子节点关联,从而更方便不同需求的使用。
问题就是,switch来change 属性check-strictly之后,由于el-tree 使用的是 lazy :load="loadTree" 的方式加载,此时发现更新key 之后,loadTree 函数被调用,但是node节点不具备渲染条件,其中对应的属性不存在,
image.png
基本设置如下所示:
为什么会有这种差距?有点不理解。
思路
发现lazy状态改变,就可以根据 treeData 来渲染,但是这里因为使用了lazy,所以数据不对,重新通过接口加载treeData可以显示成功,但是会有加载过程。
显然问题是在 check-strictly 切换的时候,el-tree 在vue diff 算法下重新渲染的时候,初始化的 treeData 有问题导致的、
但是具体逻辑还有待梳理。
看 node_modules/element-ui/package.json
这个文件是我们项目中使用到的文件,看名称就知道应该是把所有的el组件都打包封装进去了。
我们去看源码,可以知道Load传到了一个TreeStore的工厂函数里面,
在构造函数中调用了,基本可以看出是对根节点的初始化,然后对子节点进行创建加载,
顺藤摸瓜,可以发现子节点主要调用的loadData函数,此函数也调用了我们传进来的loadTree函数,具体问题怎么解决还没找到头绪
网友评论