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

最新推荐文章于 2024-04-08 16:14:08 发布
最新推荐文章于 2024-04-08 16:14:08 发布
阅读量704 收藏 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

职场新生
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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
vue中el-tree的懒加载
zhz5214的博客
10-12 4151
load方法会在展开一个父节点时触发，它的参数包含了父节点的数据和一个回调函数。为了改为懒加载的方式，后台数据加载也分成了3步，先加载一级分类，再加载目录，最后加载文件。我这里的树，采用了load方法和node-click2个方法，要达到的效果就是点击一下，才展开下一级的节点，这样懒懒的加载，避免一次加载数据量过多而影响体验。懒加载是指在Vue组件渲染的过程中，只加载当前可见的部分数据，而不是一次性加载整个数据。后台的数据格式也是完整的树的加载。这里有三级节点，分别是一级分类节点，目录节点，文件节点。
【vue】Element多个树型控件节点 同步数据 引起的问题踩坑（懒加载 拖拽 俩个树形同步等问题）
qq_33967887的博客
01-04 1757
多个树型 同步数据问题踩坑 先放效果图 左侧是 leftdata 右侧是rightdata 这是俩个不同接口下的数据,并且俩个树形都是使用懒加载的模式. – 踩坑1 使用getCheckedNodes拿到的数据 是所有勾选过的数据 不论数据是一级还是二级三级 都会放在同一个数组中 this.$refs.XXXX.getCheckedNodes() 踩坑2 懒加载模式的情况下 单纯的修改 children 数据是不会让页面更新出数据的 需要手动刷新并且更新数据,代码如下 // >>按
el-tree实现懒加载
最新发布
xinxin_csdn的博客
04-08 587
二、懒加载并做数据回显。
element el-tree组件节点懒加载
qq_36048118的博客
12-10 2113
这里写自定义目录标题 以下是element官网懒加载自定义叶子节点的示例，我仅加上一些注释，以便于理解 <el-tree :props="props" // 指定节点的label以及子节点的data等 :load="loadNode" // 点击某节点时会调用该方法，以查询该节点的子节点，同一节点多次点击仅执行（加载）一次 lazy // 必须...
【el-tree大量数据卡顿解决】el-tree利用懒加载解决大数据量卡顿问题，el-tree懒加载回显方法
seeeeeeeeeee的博客
07-04 8663
问题是这样：我的项目中，有一个角色管理的页面。以前的老代码，直接用el-tree渲染的树形结构，勾选设置对应的权限。其他的部门倒是还好，但是涉及到老板的部门设置的时候，由于我们这边的权限太多，部门也特别多，而老板又是有很多的权限，导致我们一次需要渲染出一大堆的tree结构之外，还需要回显一大堆的勾选。这就导致别的人设置可以，但是老板设置权限的时候就会卡住几十秒，甚至卡死浏览器。所以没办法，只能动手优化一下老代码，让他快一点。这样的属性结构，有很多的层级 el-tree懒加载的功能，一层一层的加载，让页面不会
elementUI 解决tree组件重复赋值问题
weixin_42121557的博客
06-09 1333
this.mainNode.childNodes = [];//把存起来的node的子节点清空，不然会界面会出现重复树！ this.loadNode(this.mainNode,this.mainReslove) 2.main
element-plus的el-tree懒加载调用二次resolve数据出现异常
mmiaoChong的博客
05-26 2156
项目场景： 问题：在使用element-plus的el-tree树结构的懒加载。 问题描述 在el-tree中的懒加载loadNode 函数加载数据出现覆盖情况 项目中数据代码： const loadNode = (node, resolve) => { if (node.level === 0) { store.commit("SET_USER", { ...store.getters.user, deptName: "清眸物联", isChanna
element-ui tree组件解决点击node数据重复加载问题
qq_39210972的博客
02-23 3511
解决element-ui tree数据重复加载问题
el-tree 懒加载数据，展开的节点与查询条件联动，且对查询的节点进行定位
IT_dabai的博客
09-07 2632
其实这个联动，主要是搞懂el-tree的node-key和属性就行。简单来说，就是你想展开哪个节点，就把该节点node-key对应的字段放入default-expanded-keys对应的数组中。其他的就是对数据的处理把接口获取到的数据处理成你想要的样子，这是前端在很多时候都要做的事情。
Vue多次调用el-tree懒加载
eoco_2016的博客
12-09 1364
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
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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 el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI el-tree loadnode懒加载 更新节点
a965412234的博客
09-16 2457
elementUI tree loadnode懒加载 更新指定节点
Element-UI操作树组件懒加载模式下进行节点更新
weixin_45602368的博客
08-12 527
最近某个项目中有一个树组件需求：点击项目节点展开子项目+作业，点击项目节点后面小图标只展示作业这样一个要求。 同时，因为数据库数据过大情况，在本系统中树组件全都是懒加载模式 参考 loadOrgNode(node, resolve) { console.log(node.level, "level"); // 加载 树数据 let that = this; if (node.level === 0) { setTimeout(() =&g
element树形控件子节点重复的问题处理
小羊的博客
05-17 2029
记录一次使用element树形控件踩的坑 需求：这次要做的是角色权限配置的需求，需要使用element树形控件来给对应的角色分配对应的导航菜单，像下图这样 问题：写的时候主要问题就是只选择一个子组件不选父组件的时候会打印出两条数据，一条完整的父节点包含子节点的数据，一条单纯只有子节点数据。此时需要把勾选的数据信息传给后台 data是点击的数据，checked是勾选的数据 这样写了以后打印出的数据就会有父组件包含子组件的，也有单个子组件的，总之会很乱 就会出现类似这样的bug效果，，还有其他菜单混乱的效
lazyload 重复加载完美解决方案
qq_51026595的博客
01-28 2135
在开发时因为需要实现图片后置加载，又因前端使用的是 Thymeleaf + JQuery，便想着用 lazyload 插件实现。但在实际测试中发现 lazyload 会重复请求两次资源（一次为触发懒加载资源时请求，一次为替换 src 属性时请求），相关代码片段如下： 发现这一点我立马就绷不住了，要知道我就是因为我的小破服务器发个图片要一直转啊转才要懒加载提高用户体验的，你倒好直接给我来个超级加倍转啊转，反正你 lazyload 拓展的功能也没多少，大不了我高度预加载...
el-tree-select实现懒加载
02-19
el-tree-select是Element UI库中的一个组件，用于展示树形结构的下拉选择框。实现懒加载可以提高性能，只在需要展开节点时才加载子节点数据。 要实现el-tree-select的懒加载，需要以下步骤： 1. 在el-tree-select组件中设置lazy属性为true，表示开启懒加载模式。 2. 在el-tree-select组件中设置load方法，用于加载子节点数据。load方法接收两个参数：node和resolve。node表示当前需要加载子节点的节点对象，resolve是一个回调函数，用于将加载的子节点数据传递给el-tree-select组件。 3. 在load方法中，根据node的信息发送异步请求获取子节点数据，并在请求成功后调用resolve方法将数据传递给el-tree-select组件。 下面是一个示例代码： ```html <template> <el-tree-select v-model="selectedNode" :lazy="true" :load="loadData" ></el-tree-select> </template> <script> export default { data() { return { selectedNode: null }; }, methods: { loadData(node, resolve) { // 发送异步请求获取子节点数据 // 假设请求返回的数据格式为[{ label: 'Node 1', id: 1, children: [] }, ...] axios.get('/api/getChildren', { params: { nodeId: node.id } }) .then(response => { // 将子节点数据传递给el-tree-select组件 resolve(response.data); }) .catch(error => { console.error(error); }); } } }; </script> ``` 在上面的示例中，loadData方法使用axios发送异步请求获取子节点数据，并在请求成功后调用resolve方法将数据传递给el-tree-select组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值