关于element-ui el-tree lazy懒加载 局部刷新的问题记录

在项目开发中,使用el-tree  进行懒加载的时候,如果遇到需要进行添加 删除操作的时候,整体刷新数据体验会很不好,所以需要局部进行刷新, 

我们可以通过找到树节点的形式,对当前展开的节点进行重新打开请求一次,以此来获取最新数据

 <el-tree
    lazy  
    ref="tree"
    :load="loadNode"
    :node-key="id"    
  >
 </el-tree>


methods: {
         refreshNodeBy(id){
             let node = this.$refs.tree.getNode(id); // 通过节点id找到对应树节点对象
             node.loaded = false;
             node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
         }
     }

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree懒加载功能是通过`lazy`属性和`load`方法结合使用来实现的。在`el-tree`组件中,设置`lazy`属性为true表示启用懒加载功能,然后通过`load`方法加载子树数据。 具体实现的步骤如下: 1. 在`el-tree`组件中设置`lazy`属性为true,即`lazy="true"`。 2. 创建一个方法,例如`loadNode`,作为加载子树数据的方法。 3. 在`loadNode`方法中,根据节点的级别判断是一级节点还是子节点。 4. 如果是一级节点,直接将父级数据设置到`resolve`中,即`resolve(that.knowledgeDatas)`。 5. 如果是子节点,根据需要获取子节点的数据,可以通过异步请求等方式获取。 6. 获取到子节点的数据后,将数据格式化为需要的格式,并使用`updateKeyChildren`方法将数据设置给其父节点,即`that.$refs.tree.updateKeyChildren(node.data.id, resArr)`。 7. 最后,将获取到的子节点数据通过`resolve`传递出去,即`resolve(resArr)`。 通过以上步骤,就可以实现el-tree部分的懒加载功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Element-ui树形控件el-tree自定义增删改和局部刷新懒加载操作](https://download.csdn.net/download/weixin_38542223/13125838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-tree懒加载](https://blog.csdn.net/m0_57311133/article/details/123844869)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值