el-tree数据重复的问题（懒加载）；点击展开的属性

最新推荐文章于 2024-04-08 16:14:08 发布
最新推荐文章于 2024-04-08 16:14:08 发布
阅读量984 收藏 11
点赞数 9
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PaoMianXianShen/article/details/135078612
版权

el-tree的懒加载

使用很简单，是搭配el-tree的lazy属性和load方法

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

但是在请求的时候会出现重复数据的情况，这是因为你每次请求，没有将上次的数据置空

保存level为0的情况下的node和resolve
然后每次请求的时候在这里插入图片描述
将上次node的childNodes属性置空再去调请求数据的方法，可以解决该问题。

expand-on-click-node 是el-tree的属性，在希望点击节点的时候展开，可以将其置为true，如果只能点击箭头才让展开则为false，默认true

职场新生
关注
el-select数据过多懒加载的解决(loadmore)
10-16
总之，el-select组件数据过多时的懒加载解决方案，通过分页加载数据和监听滚动事件来动态渲染el-select的内容，可以有效解决大量数据导致的性能问题，并提供更加流畅的用户交互体验。在实现时，需要注意数据同步和...
vue el-tree主键id重复 添加自增id 以及原相同节点同步勾选 同步操作
最新发布
Jokerxiuka的博客
08-28 475
【代码】vue el-tree主键id重复 添加自增id 以及原相同节点同步勾选 同步操作。
element-ui tree组件解决点击node数据重复加载问题
qq_39210972的博客
02-23 3664
解决element-ui tree数据重复加载问题
懒加载树[tree]、点击已经加载完成的树[tree]节点，再次加载该节点下一级的所有子节点...
weixin_30878501的博客
01-26 479
1.先来一个div，如下：[设置:id=treeboxbox_tree,如下] <td valign="top"> <div id="treeboxbox_tree" style="width: 100%; height: 100%; float: left border: 1px solid red;"&g...
element el-tree组件节点懒加载
qq_36048118的博客
12-10 2189
这里写自定义目录标题 以下是element官网懒加载自定义叶子节点的示例，我仅加上一些注释，以便于理解 <el-tree :props="props" // 指定节点的label以及子节点的data等 :load="loadNode" // 点击某节点时会调用该方法，以查询该节点的子节点，同一节点多次点击仅执行（加载）一次 lazy // 必须...
elementUI 解决tree组件重复赋值问题
weixin_42121557的博客
06-09 1405
this.mainNode.childNodes = [];//把存起来的node的子节点清空，不然会界面会出现重复树！ this.loadNode(this.mainNode,this.mainReslove) 2.main
element-plus的el-tree懒加载调用二次resolve数据出现异常
mmiaoChong的博客
05-26 2347
项目场景： 问题：在使用element-plus的el-tree树结构的懒加载。 问题描述 在el-tree中的懒加载loadNode 函数加载数据出现覆盖情况 项目中数据代码： const loadNode = (node, resolve) => { if (node.level === 0) { store.commit("SET_USER", { ...store.getters.user, deptName: "清眸物联", isChanna
el-tree 懒加载数据，展开的节点与查询条件联动，且对查询的节点进行定位
IT_dabai的博客
09-07 3289
其实这个联动，主要是搞懂el-tree的node-key和属性就行。简单来说，就是你想展开哪个节点，就把该节点node-key对应的字段放入default-expanded-keys对应的数组中。其他的就是对数据的处理把接口获取到的数据处理成你想要的样子，这是前端在很多时候都要做的事情。
Vue多次调用el-tree懒加载
eoco_2016的博客
12-09 1466
Vue中使用el-tree树形结构懒加载 当同一个页面有多个树形结构时，使用数据data和懒加载结合的方法，避免多次调用接口。 <el-tree :data="treeData" :props="insprops" :key="treeKey" ref="tree" @node-expand="getNodeInfo" @node-click="handleNodeClick" :load="loadNode" lazy node-key="id" :filter-node-method="fi
lazyload 重复加载完美解决方案
qq_51026595的博客
01-28 2373
在开发时因为需要实现图片后置加载，又因前端使用的是 Thymeleaf + JQuery，便想着用 lazyload 插件实现。但在实际测试中发现 lazyload 会重复请求两次资源（一次为触发懒加载资源时请求，一次为替换 src 属性时请求），相关代码片段如下： 发现这一点我立马就绷不住了，要知道我就是因为我的小破服务器发个图片要一直转啊转才要懒加载提高用户体验的，你倒好直接给我来个超级加倍转啊转，反正你 lazyload 拓展的功能也没多少，大不了我高度预加载...
vue el-tree 默认展开第一个节点的实现代码
10-15
8. 代码实现：模板中的<el-tree>标签绑定了数据和属性，其中data属性绑定后台返回的树形数据，default-expanded-keys属性绑定用于展开节点的数组。通过@node-click事件可以为树形节点的点击事件绑定处理函数，例如...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
el-tree 组件还提供了一些其他有用的属性和方法来支持树形控件的操作，例如 :props 属性用于自定义节点中各个字段的 key，node-key 用于指定节点唯一标识的字段，以及 lazy 属性用于配置节点的懒加载。了解并合理...
vue中el-tree的懒加载
zhz5214的博客
10-12 5122
load方法会在展开一个父节点时触发，它的参数包含了父节点的数据和一个回调函数。为了改为懒加载的方式，后台数据加载也分成了3步，先加载一级分类，再加载目录，最后加载文件。我这里的树，采用了load方法和node-click2个方法，要达到的效果就是点击一下，才展开下一级的节点，这样懒懒的加载，避免一次加载数据量过多而影响体验。懒加载是指在Vue组件渲染的过程中，只加载当前可见的部分数据，而不是一次性加载整个数据。后台的数据格式也是完整的树的加载。这里有三级节点，分别是一级分类节点，目录节点，文件节点。
el-tree实现懒加载
xinxin_csdn的博客
04-08 1443
二、懒加载并做数据回显。
elementui tree 懒加载 :load="loadNode" 只触发一次 解决方案
lllsj的博客
03-11 1万+
当tree 懒加载获取 信息时,只有在第一次 加载时,触发 :load=“loadNode” ,但是这样明显是不合理的,因为当增删改查,后端数据已经改变,但是咱们的:load=“loadNode” 不会再次触发,导致数据显示问题; <el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick">&...
el-tree 懒加载数据，增删改时局部刷新实现
weixin_45776308的博客
08-07 2709
主要思路：将展开的层级的node保存当curNode中，在进行添加刷新后调用partialRefreshpartialRefresh（）方法【下面代码】模拟一次节点展开事件，加载重命名后的新数据；的展开事件，可以设置node.parent.loaded = false;node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的。2.defaultProps 需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表。2.增删改时实现局部刷新。
Element——el-tree懒加载
热门推荐
拾柒唸的博客
12-27 1万+
el-tree懒加载基本使用以及使用场景解析
vue2 el-tree复选框是否打钩状态_el-tree 长列表太卡的问题
05-18
关于vue2 el-tree复选框是否打钩状态的问题，可以通过绑定节点的`checked`属性来控制复选框的状态。例如： ```html <el-tree :data="data" :props="defaultProps" @check="handleCheck"></el-tree> ``` ```javascript data() { return { data: [{ id: 1, label: '一级 1', children: [{ id: 11, label: '二级 1-1', children: [{ id: 111, label: '三级 1-1-1' }] }] }], defaultProps: { children: 'children', label: 'label', checked: 'checked' } }; }, methods: { handleCheck(node, checked, childNodeList) { // 处理节点的 checked 属性 node.checked = checked; // 处理子节点的 checked 属性 if (childNodeList) { childNodeList.forEach(childNode => { childNode.checked = checked; }); } } } ``` 关于el-tree长列表太卡的问题，可以尝试以下优化措施： 1. 使用虚拟滚动：可以通过设置`el-tree`的`renderAfterExpand`和`lazy`属性来实现虚拟滚动，只渲染可见区域的节点，减少渲染时间和内存占用。 2. 异步加载数据：可以将数据分批加载，只加载当前展开的节点和其子节点，不展开的节点暂不加载。 3. 缓存数据：可以将已经加载的节点数据缓存起来，避免重复请求数据。 4. 减少节点渲染：可以通过设置`el-tree`的`lazy`属性和`node-key`属性，只渲染可见区域的节点和其子节点，减少节点渲染时间和内存占用。 5. 使用`keep-alive`缓存组件：可以将`el-tree`组件使用`keep-alive`缓存起来，避免频繁创建和销毁组件，提高性能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值