el-tree外层包裹loading导致下拉异常

最新推荐文章于 2024-02-27 11:15:58 发布
最新推荐文章于 2024-02-27 11:15:58 发布
阅读量701 收藏 1
点赞数
分类专栏： vue element 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/riluokk/article/details/128199815
版权

问题发现：
主要是该问题难以复现，在自己复测的时候有没有发现异常，在后端的电脑上有能复现
问题代码截图：
在这里插入图片描述
问题剖析：
外侧的tree代码主要是用作树的容器，树超出高度起到下拉的作用，但是导致了该问题，且难以复现，代码层也没有能够明显看出的问题，考虑到可能是element的v-loading指令导致的问题，参考了官方文档对于v-loading的解释，所以便考虑以将loading和容器层两个拆开，这样来解决问题
解决代码截图：
在这里插入图片描述
两个层次拆开后，后端使用的时候复测并未出现该问题，具体是否已完全解决，还待跟进一步的使用才知道，主要是这个BUG复现程度难，如果有响应的解析，还麻烦各位在评论区中指出

日落KK
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
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-...
el-tree分页懒加载的实现
AmyGeng123的博客
04-25 1446
el-tree分页懒加载的实现。
elementui中el-tree控件懒加载和局部刷新
风如也的博客
03-16 7218
按照 elementui官方文档示例，效果图 template部分，需要结合 lazy 和 load 一起使用 <el-tree show-checkbox node-key="id" lazy :load="loadNode" :props="defaultProps" v-loading="list.loading" ref="tree"> </el-tree> js 部分 export default { data () {
el-tree机构树最后一级出现加载图标，取消不掉
最新发布
nss33678的博客
02-27 398
仔细排查过后，发现是因为懒加载，加载最后一级的时候逻辑出现了错误。没有下一级了，children.forEach出现错误，null没有forEach这个方法，所以卡住了，然后最后一级一直显示加载中的图标。最近一直在修改机构树，测试反馈说，机构树最后一级一直显示一个图标，问是怎么回事。
vue中el-tree的懒加载
zhz5214的博客
10-12 3663
load方法会在展开一个父节点时触发，它的参数包含了父节点的数据和一个回调函数。为了改为懒加载的方式，后台数据加载也分成了3步，先加载一级分类，再加载目录，最后加载文件。我这里的树，采用了load方法和node-click2个方法，要达到的效果就是点击一下，才展开下一级的节点，这样懒懒的加载，避免一次加载数据量过多而影响体验。懒加载是指在Vue组件渲染的过程中，只加载当前可见的部分数据，而不是一次性加载整个数据。后台的数据格式也是完整的树的加载。这里有三级节点，分别是一级分类节点，目录节点，文件节点。
[element-ui] el-tree 懒加载load
qq_14993591的博客
08-29 3779
懒加载：点击节点时才进行该层数据的获取。注意：使用了懒加载之后，一般情况下就可以不用绑定:data。
Element UI el-tree 默认展开指定节点
热门推荐
ZionHH的博客
11-01 1万+
主要两个参数 node-key 和 :default-expanded-keys <el-tree ref="tree" v-loading="treeLoading" :data="studentTree" :props="defaultProps" :highlight-current="true" node-key="id" :default-expanded-keys=...
el-tree手动触发懒加载load
weixin_44903107的博客
05-05 4364
主要代码 // el-tree 懒加载load 手动触发load更新 handleNodeExpand (data) { let _node = this.$refs.tree.getNode(data); // 设置未进行懒加载状态 _node.loaded = false; // 重新展开节点就会间接重新触发load达到刷新效果 _node.expand(); } 节点点击展开 // 节点单击事件
el-tree-selected-tree
11-15
在element-ui中的el-tree上实现单独拉出一棵树来显示树的选中节点，同时可以在该树上删除已选中节点
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
ElementUI中el-tree节点的操作的实现
10-15
主要介绍了ElementUI中el-tree节点的操作的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-tree异步请求，局部刷新
xiaojie的博客
10-18 877
element-tree异步请求，局部刷新
＜el-tree＞ 树形控件与表格的联动应用（树应用了懒加载）
weixin_44125739的博客
10-19 620
今天用到一个需要懒加载的树，第一层需要需要调用接口拼上，第二，三层懒加载并且需要默认展示，树中选中的节点，会添加到表格中，表格中数据移除树中节点也会取消选中。在这个例子里，树的第一层是从接口调出的。懒加载反显获得的树的数据。
关于elementui中的tree形组件的懒加载模式的使用
weixin_44364028的博客
10-20 683
<template> <div> <el-tree node-key="id" lazy :load="loadNode" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true" v-loading="list.loading" @node-click="nodeCli
el-tree树组件懒加载-后端上千条数据前端进行处理
个人博客
03-08 3831
一般是通过树节点id请求后端接口，添加新的节点数据，但我最近遇到的是后端一次性返回上千条数据（树数组结构），由前端进行处理实现懒加载。首先，load属性绑定一个懒加载函数，当点击节点时触发。实现懒加载tree，需要为tree组件添加。
element ui treetable操作_浅谈vue+element全局loading加载
weixin_39572316的博客
11-24 655
✎ 每日一语 孤单一人的时间使自己变得优秀，给来的人一个惊喜，也给自己一个好的交代。前言在我们的平时的工作中，在前后端交互的时候，为了提高页面的观赏性和用户的体验，我们会在页面上添加loading来阻止用户操作来等待接口的返回，这个时候我们会考虑到全局loading还是局部loading，下面小编总结了一下，在开发中自己用到的方法，一起共享。 今天的工作任务是什么？boss，完成全局...
vue中el-tree实现懒加载、动态增删改
qq_44903607的博客
09-18 3223
前言 在最近的一个项目中，有一个组织树的需求，效果图： 因为数据量比较大，要求懒加载并且能够在树上对组织进行操作，项目使用的是vue+ElementUI。ElementUI中有个el-tree，正好可以拿来用。项目引入ElementUI什么的就不说了，大家都知道，直接使用el-tree实现需求吧。 首先看下ElementUI中关于el-tree懒加载的介绍 关键的就是ref、load和lazy属性，于是开始写代码 第一种： template中： <el-tree ref="asyncTree"
element loading（消息加载）的简单使用
weixin_65953411的博客
10-10 1890
loading 的简单使用
el-tree 选中增加loading效果
04-18
好的，关于 el-tree 的选中增加 loading 效果，你可以使用 el-tree 的 :loading 属性来实现。当父节点或子节点被选中后，设置 loading 属性为 true，然后在异步加载完成后将 loading 属性设置为 false。这样就可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值