el-tree 阻止点击节点的时候自动展开或者收缩

最新推荐文章于 2025-02-28 14:45:51 发布
最新推荐文章于 2025-02-28 14:45:51 发布
阅读量1w 收藏 10
点赞数 14
分类专栏： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ2856639881/article/details/108937469
版权
本文介绍了在使用 El-Tree 组件时如何设置 `expand-on-click-node` 属性来控制节点的展开和收缩行为。默认情况下，点击节点会导致其展开或收缩，但若将其设置为 false，则必须通过点击箭头图标来实现这一操作。请注意，设置该属性时需加上冒号，否则将无法生效。示例代码展示了正确和错误的用法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

expand-on-click-node是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

 

 

但设置的时候，要加上:  不然无效

 

<!--这样可以-->
<el-tree :expand-on-click-node="false"  ...>


<!--这样无效-->
<el-tree expand-on-click-node="false"  ...>

 

【elementui】记录解决el-tree开启show-checkbox后，勾选一个叶结点后会自动折叠的现象
bbt953的博客
07-03 739
记录解决el-tree开启show-checkbox后，勾选一个叶结点后会自动折叠的现象
element-ui中el-tree组件节点全展开与全收缩功能实现
qq_37916164的博客
03-19 2237
【代码】element-ui中el-tree组件节点全展开与全收缩功能实现。
element-ui的Tree 树形控件禁止折叠
weixin_45884508的博客
12-15 2312
是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
el-tree实现双击树节点事件
qq_46034942的博客
02-28 491
组件本身并没有直接支持双击事件的属性或方法，我们可以借助外部函数实现。1.el-tree中使用组件的node-click事件。主要思路：在短时间范围内，通过定时器来判断是否为双击。3.methods 中定义节点双击函数和点击函数。2.data中定义对象。
elementUI的tree树形控件，阻止节点点击触发展开收缩的方法
热门推荐
small_33的博客
08-04 1万+
当我们的操作是这样的时候： 当我们想要点击新增或是删除的时候，有子节点的节点会触发展开收缩的事件，那么我们就要阻止冒泡了，只需要加上 expand-on-click-node="false"就可以如图：
[element-ui] 对el-tree的某个节点进行禁用
qq_14993591的博客
11-08 3699
【代码】[element-ui] 对el-tree的某个节点进行禁用。
【前端】- 在使用Element UI 的el-tree组件时，从底层去研究如何去实现一键展开/关闭【tree节点】的功能
2302_78387246的博客
03-29 3975
【已实现】- 【el-tree一键展开/折叠】 - 在使用Element UI 的el-tree组件时，从底层去研究如何去实现一键展开/关闭【tree节点】的功能
element-ui的el-tree节点含有图片，收起展开图片会卡顿
qq_43151592的博客
04-24 715
解决element-ui的el-tree节点含有图片，收起展开图片会卡顿
element-plus elplus el-tree三种图标自定义 并且点击图标展开收起 点击文字获取数据
yuey0809的博客
12-07 5018
前言 公司需求,需要实现如下样式的树形列表 (基于vue3 + element-plus) 当节点展开时,显示展开的文件夹图标,当节点收起时显示收起的文件夹,最后一级显示文件样式 废话没有了, 代码如下 用到的JS compileTreeData.js 还有一件事 有的时候文字很短,不好点击,需要点击文字右侧空白也能触发数据回传事件 那么你需要想办法 覆盖这个类 ---- .el-tree-node__label 覆盖后即可
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
2401_87288719的博客
09-25 1422
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了编辑情况
el-tree设置默认展开节点后，el-tree点击节点不能关闭（触发node-collapse事件，节点无法关闭）
IT_dabai的博客
09-19 3950
项目中使用到el-tree， 考虑到数据量还是有这么大，就想将用户对节点的操作保存下来（保存用户已点击展开的节点id，在下一次进入或刷新后，对其进行默认展开操作） 问题：在后面测试中发现点击第一级展开的某些节点，节点竟然无法关闭。。。。。
el-tree关闭展开和关闭树结构的动画效果
程先生的博客
10-12 1245
关闭el-tree树结构展开和关闭的动画效果
el-tree动态设置是否全部展开属性，值已经改变，但是没有展开或折叠
m0_50981596的博客
04-29 1328
el-tree动态设置是否全部展开属性，值已经改变，但是没有展开
el-tree和el-popover结合及阻止popover的点击事件
MISS_zhang_0110的博客
03-03 1747
【代码】el-tree和el-popover结合及阻止popover的点击事件。
el-tree设置了默认展开节点属性，在对树记录展开关闭操作时会出现关闭不了节点的问题
pxy9000的博客
03-28 1297
当有子节点展开时，会自动展开父节点。因此，当需要关闭展开的节点下面有子节点处于展开状态时，会出现无法关闭该节点的问题。只需设置auto-expand-parent=false即可。
elementUi的tree组件动态设置展开折叠失效
zoooo_的博客
01-07 5311
elementUi的tree组件动态设置展开折叠失效
el-tree 全部打开状态 不要折叠
有问题可关注公众号：前端研究院 后台输入问题回复
07-14 2101
<el-tree :data="setTree" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange" ...
Element 树形组件，数据刷新以后原本展开的节点被收缩的问题
m0_37856464的博客
04-12 5762
出现问题的原因是 el-tree 中定义的 data 被重新赋值了 解决： 给 el-tree组件设置default-expand-keys属性 （ :default-expanded-keys="defaultExpandedKeys" ）， 在生命周期函数beforeUpdate里面将已经展开的节点id保存到defaultExpandedKeys中 html代码如下： <el...
element-ui的Tree在自定义组件时，使用render-content后防止触发expand-on-click-node的方式
weixin_42643176的博客
06-19 7464
先看问题 在使用element-ui的Tree组件添加一些按钮的时候，比如这样： 这个时候如果设置了expand-on-click-node属性为true的话，点击按钮会同步触发节点的展开收缩事件。 如果使用的是scoped slot的话可以直接使用.stop修饰符。但使用的是render-content该怎么添加.stop呢？ 解决方法 传入一个$event，然后在点击事件中添加： 然后再阻止一下事件冒泡就好啦～ append(data, event) { event.stopPro
<el-tree> 展开一个节点 收起其他节点
最新发布
04-03
### 单节点展开功能的实现 为了实现在 `<el-tree>` 组件中展开一个节点时自动收起其他节点的功能，可以通过监听 `node-expand` 和 `node-collapse` 事件来控制树节点的状态。具体来说，在每次展开某个节点之前，先遍历整个树并关闭已打开的节点。 以下是完整的解决方案： #### 方法描述 通过绑定 `@node-expand` 和 `@node-collapse` 事件到 `<el-tree>` 上，可以在节点展开或折叠时执行特定逻辑。利用 `treeRef.setCurrentKey(null)` 或者手动调用 `treeRef.store.setCurrentNode()` 来管理当前活动节点的状态[^1]。 #### 示例代码 以下是一个基于 Vue.js 的实现方式： ```vue <template> <div> <el-tree :data="treeData" node-key="id" ref="treeRef" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"> </el-tree> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Parent Node', children: [{ id: 2, label: 'Child Node' }] }, { id: 3, label: 'Another Parent', children: [{ id: 4, label: 'Another Child' }] } ], activeNodeId: null, }; }, methods: { handleNodeExpand(node) { const treeRef = this.$refs.treeRef; if (this.activeNodeId !== null && this.activeNodeId !== node.id) { // 收缩之前的活跃节点 const previousActiveNode = treeRef.getNode(this.activeNodeId); if (previousActiveNode) { treeRef.collapseNode(previousActiveNode); } } this.activeNodeId = node.id; // 更新当前激活节点ID }, handleNodeCollapse(node) { if (this.activeNodeId === node.id) { this.activeNodeId = null; // 当前节点被折叠，则清空激活状态 } } } }; </script> ``` 上述代码实现了如下功能： - 使用 `@node-expand` 监听节点展开操作，并记录当前正在展开的节点 ID。 - 如果有先前已经展开的节点（即 `activeNodeId` 不为空），则将其折叠后再允许新节点展开。 - 节点折叠时清除对应的激活标记。 此方案能够有效解决多节点同时保持展开的问题，从而达到单节点展开的效果[^2]。 #### 关键技术点说明 1. **动态更新激活节点**：通过维护 `activeNodeId` 变量跟踪当前处于展开状态下的唯一节点。 2. **获取指定节点实例**：借助 `treeRef.getNode(id)` 获取目标节点以便进一步处理如折叠等动作[^3]。 --- ###
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值