美文网首页
el-tree lazy 使用key重新渲染问题

el-tree lazy 使用key重新渲染问题

作者: jeneen1129 | 来源:发表于2023-04-16 11:08 被阅读0次

    问题描述

    使用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函数,具体问题怎么解决还没找到头绪

    相关文章

      网友评论

          本文标题:el-tree lazy 使用key重新渲染问题

          本文链接:https://www.haomeiwen.com/subject/zjxuddtx.html