el-tree loadNode懒加载

已于 2022-02-14 11:11:33 修改
阅读量2k 收藏 8
点赞数
分类专栏： ElementUI 文章标签： 前端 vue.js
于 2021-12-24 17:01:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45382009/article/details/122131857
版权
本文介绍了在Vue.js中使用el-tree组件进行节点数据的懒加载，强调需要同时设置`lazy`和`load`属性来实现该功能。首先讲解如何获取顶级节点的数据，然后阐述如何在用户交互时动态获取子节点数据，从而提高应用性能。
摘要由CSDN通过智能技术生成

需要 lazy、 load 两个属性一起用

<el-tree 
         :data="treeData" 
         :props="defaultProps" 
         :load="loadNode" 
         @node-click="handleNodeClick" 
         lazy>
</el-tree>

data() {
   
    return {
   
        treeDataList: [],
        defaultProps: {
   
            id: 'id'
最低0.47元/天 解锁文章
不能懒鸭
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-tree 懒加载
墨茶Official 愿你在二次元有吃不完的草莓 饺子(ㄒoㄒ)
10-21 1622
<el-tree :props="defaultProps" :load="loadNode" lazy @node-click="selectDeptTreeNode" // 点击节点时触发 :filter-node-method="filterNode" // 关键字过滤 ref="personDeptTree"> </el-tree> 双向绑定值 defaultProps: { children: 'subs'
elementUI el-tree loadnode懒加载 更新节点
a965412234的博客
09-16 2509
elementUI tree loadnode懒加载 更新指定节点
elementui tree 懒加载 :load="loadNode" 只触发一次 解决方案
lllsj的博客
03-11 1万+
当tree 懒加载获取 信息时,只有在第一次 加载时,触发 :load=“loadNode” ,但是这样明显是不合理的,因为当增删改查,后端数据已经改变,但是咱们的:load=“loadNode” 不会再次触发,导致数据显示问题; <el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick">&...
ElementUi el-tree动态加载节点数据 load方法触发机制
最新发布
c327127960的博客
06-04 1021
ElementUi el-tree动态加载节点数据 load方法触发机制
el-tree懒加载部分
weixin_49284272的博客
05-12 604
本文只展示懒加载部分 :props="treeProps" :load="loadNode" lazy <el-tree ref="tree" style="height:100%" class="filter-tree" node-key="id" :data="data" :props="treeProps" show-checkbox
el-tree树组件的懒加载load写法
fzlw000的博客
07-15 902
懒加载前端代码html部分</</</</js部分。
el-tree 懒加载数据，展开的节点与查询条件联动，且对查询的节点进行定位
IT_dabai的博客
09-07 2923
其实这个联动，主要是搞懂el-tree的node-key和属性就行。简单来说，就是你想展开哪个节点，就把该节点node-key对应的字段放入default-expanded-keys对应的数组中。其他的就是对数据的处理把接口获取到的数据处理成你想要的样子，这是前端在很多时候都要做的事情。
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
el-tree-selected-tree
11-15
在Element UI库中，`el-tree` 是一个强大的组件，用于构建可交互的树形结构数据展示。在实际开发中，我们经常需要处理用户选择的节点，并可能需要独立展示这些选中节点，甚至允许用户在独立的树结构中进行删除操作。...
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
[element-ui] el-tree 懒加载load
qq_14993591的博客
08-29 4209
懒加载：点击节点时才进行该层数据的获取。注意：使用了懒加载之后，一般情况下就可以不用绑定:data。
vue+element tree懒加载更新数据
weixin_45615375的博客
05-30 5176
使用element tree实现懒加载，更新某一节点的数据 1.tree 懒加载 只需要在el-tree标签上面添加lazy，load属性，load的接收是一个函数。这里贴上官网给出的方法 <el-tree :data="treeList" ref="tree" class="vue-tree" lazy :load="loadNode" :highlight-current="true" :node-key="nodeKey" @node-clic
如何在el-tree懒加载并且包含下级的情况下进行数据回显-02
m0_47531829的博客
11-19 1258
nodesMap其实是一个对象，key是已经展开数据的id，value是node信息，所有我们的思路就是等数据加载完成(resolve调用结束)，此时reslove的数据对应的node已经生成，改变value里面的checked和indeterminate就可以实现多选，半选的回显，这里需要特别注意，一定要在reslove函数执行完成之后，在进行回显。方法是在root底层添加数据，形成层联关系，所以我们要在resolve方法执行后，进行回显，loadNode的第一个参数，实际上对应的源码里面的。
Element——el-tree懒加载
热门推荐
拾柒唸的博客
12-27 1万+
el-tree懒加载基本使用以及使用场景解析
el-tree 懒加载数据，增删改时局部刷新实现
weixin_45776308的博客
08-07 2583
主要思路：将展开的层级的node保存当curNode中，在进行添加刷新后调用partialRefreshpartialRefresh（）方法【下面代码】模拟一次节点展开事件，加载重命名后的新数据；的展开事件，可以设置node.parent.loaded = false;node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的。2.defaultProps 需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表。2.增删改时实现局部刷新。
elementUI tree树和loadNode和dialog
lbchenxy的博客
08-20 1777
dialog 和 tree树的一个功能小组件 我们先来看一下样式 这里我们对dialog进行一个封装 ，tree树也进行了封装。我们这次采用的懒加载方式。 tree树遇到的最大的问题loadNode只加载一次。所以我们点击查询的时候想重置操作 我查了下文档没有怎么样重置loadNode的方法，然后经过大佬解答我们需要用node.loaded = false; node.expand();重置这层树。 下边为了方便将代码送给大家 对dealog的封装 <template> <el-di
el-tree部分懒加载
08-28
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 ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值