发现el-tree有个奇怪的功能：点击节点移动鼠标松开会收缩父节点

已于 2022-03-01 15:51:58 修改
阅读量639 收藏
点赞数
分类专栏： element-ui Vue 文章标签： vue
于 2022-03-01 15:51:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AzeShinja/article/details/123206930
版权

故事起始于一个无聊的下午，在公司随便狂点自己写的功能。
后来发现为什么有时候会导致父目录收缩的问题！！ 刚开始怕极了，以为是自己写的什么鬼BUG。
最后在来回点来点去发现是需要拖动节点才能触发，然后我就去了饿了么组件官网的DEMO试了一下，果然我去。人家DEMO就有这个功能=。=。
所以说目前当作一个功能点吧，就离谱。人家组件库中的配置和介绍对这个功能一口没提=。=。

总结就是： 没必要改

有解决方案踢我一脚， 可能是我没看见脑内过滤了

AzeShinja
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ElementUI中el-tree节点的操作的实现
10-15
主要介绍了ElementUI中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-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Elementui tree节点树再次请求数据后会自动折叠，解决方案
L1515115的博客
04-26 3911
Elementui tree节点树再次请求数据后会自动折叠，解决方案
vue项目el-tree添加或者删除子节点后仍然保持当前节点展开，树不收回去的解决方法
m0_60699903的博客
02-09 4750
element-ui中的el-tree在添加或者删除子节点后，也就是每次数据刷新后树就会收上去，但是如果我们还需要在当前节点下进行后续操作，而且有很多层节点的情况下，就很麻烦了，对用户体验感非常差，那么怎么解决呢？ ...
element-ui Tree组件点击节点展开，其余节点收起功能
qq_43151592的博客
05-12 4698
效果展示： <template> <el-tree :data="data" node-key="label" ref="tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </template> this.$refs.tree.store.nodesMap[data.label].expanded = false 可以控制指定Tree树节点是展开还是收起。false
Element 树形组件，数据刷新以后原本展开的节点被收缩的问题
m0_37856464的博客
04-12 5030
出现问题的原因是 el-tree 中定义的 data 被重新赋值了 解决： 给 el-tree组件设置default-expand-keys属性 （ :default-expanded-keys="defaultExpandedKeys" ）， 在生命周期函数beforeUpdate里面将已经展开的节点id保存到defaultExpandedKeys中 html代码如下： <el...
element Tree 树形控件 收缩全部节点
青春正在燃烧的博客
10-08 3191
1.为了实现点击节点后自动收缩全部节点，找了一大堆文章看都没有实现，还是自己一层一层的去qio才找到的。效果图如下： 2.最关键代码如下： this.$refs.treeAdd.$children[0].node.parent.childNodes[0].expanded = false; 如果不行就自己一层一层的剥开它的心，你会发现，你会讶异，原来藏得这么深。 ...
element ui el-tree控制树形结构全选、取消全选，展开收起
李程程的博客
09-06 5134
控制树形结构全选、取消全选，展开收起。
Vue -- 如何通过 el-tree 构造一个双层树 & 如何控制树的父节点无法展开 & 点击事件
支棱起来
09-01 1404
待实现的需求： 1、树为两层，第一层为指标类型，第二层为指标值 2、点击树的第二层（即指标值），在相关指标值后面出现基准二字 <el-tree :data="measTreeData" :props="measTreeProps" node-key="id" style="margin-top:5px;" ref="measTree" @node-click="handleMetricsClick"> <span class="rootcause-
[element-ui] el-tree 获取当前节点的顶级父节点
qq_14993591的博客
05-31 2312
最后输出顶级父节点的 label 属性。需要注意的是，如果当前节点本身就是根节点，那么顶级父节点就是它自己。属性，直到顶级父节点为止。这里使用了 while 循环来进行多次遍历，每一次都将。属性来访问父组件，从而找到当前节点的顶级父节点。属性指向当前节点的父节点，直到找到。来获取当前节点，然后通过循环遍历。使用 el-tree 的。属性为 1，即根节点。
elementUI--＜el-tree＞：获取到当前选中节点的id
lemon.qing@foxmail.com
12-07 2029
如图，怎样获取到选中内容的id呢？ 以下图为例： 全部代码： 在methods中直接调用即可如图：
el-tree树形组件 一次性折叠所有子节点
最新发布
李十三的博客
01-29 766
可以遍历treeRef.store.root.childNodes把全部节点的expanded设置为false，再通过default- expanded-keys设置需要展开的节点。
el tree 节点折叠展开动态控制
既然青春留不住，还是做个大叔好!
01-05 4100
问题 因为这里的应用场景是可以用户配置树和共享树，其它用户可以访问树，问题在于如果树的节点太多展开就会显得很长，反过来如果折叠的状态唯一，那么用户就可能无法看到自己想优先操作的节点，故在保存树目录到服务器的同时需要将折叠的状态值也保存到树中 思路 el-tree有两个属性 node-expand 节点被展开时触发的事件 default-expanded-keys 默认展开的节点的 key 的数组 通过node-expand来监听节点的折叠状态，通过default-expanded-keys来初始化折叠状
element （Tree 树形控件）(数据更新后取消默认收起)
qq_52151772的博客
08-17 3135
当使用 el-tree 新增文件夹时，组件默认会全部收起，重复点击会影响体验效果，于是开始了碰壁了，解决后在此分析。
父组件控制el-tree折叠
qq_45847565的博客
02-17 561
昨天没搞会的今天搞明白了 背景： el-tree有默认选中及展开的功能，在编辑成员时传参，选中及展开，但是在新建成员时，需要都折叠以及全部取消选中，在昨天的文章描述了取消选中，今天来看看折叠。 取消选中及其他用到的el-tree功能 解决思路： 用this.$refs.child可以访问到子组件，再在此基础上访问$refs.tree可以访问到当前的el-tree，控制台打印tree： 可以见到root属性保存了当前树的节点信息，childNodes为子节点的数组，expanded属性保存了当前节点是否展开
vue el-tree新增节点后不折叠刷新
weixin_42613017的博客
01-11 840
在 Vue 项目中使用 el-tree 新增节点后如果不想自动折叠，可以在新增节点后手动调用 el-tree 的展开方法，例如 $refs.tree.expandNode(node)。 如果你想让 el-tree 新增节点后自动展开，可以在 el-tree 上设置 default-expand-all 属性为 true。 之后刷新树形结构可以使用 $forceUpdate() 一般使用在父组件上的...
el-tree-select组件禁止选择父节点
05-05
可以通过 `el-tree-select` 组件的 `check-strictly` 属性来实现禁止选择父节点的功能。设置 `check-strictly` 为 `true` 后，组件会强制节点的选中状态和父子节点的关系保持一致，也就是说只有叶子节点可以被选中。 具体实现方法如下： 1. 在 `el-tree` 组件上设置 `check-strictly` 属性为 `true`。 ```html <el-tree :data="treeData" :props="defaultProps" :check-strictly="true"> </el-tree> ``` 2. 在 `el-tree-select` 组件上设置 `show-checkbox` 属性为 `true`。 ```html <el-tree-select :data="treeData" :props="defaultProps" :show-checkbox="true"> </el-tree-select> ``` 这样就可以禁止选择父节点，只能选择叶子节点了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值