elementUI的tree树形控件，阻止节点点击触发展开收缩的方法

最新推荐文章于 2025-09-03 10:45:39 发布
原创 最新推荐文章于 2025-09-03 10:45:39 发布 · 1.6w 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

在操作具有子节点的节点时，例如进行新增或删除操作，为了避免触发不必要的展开或收缩事件，可以使用expand-on-click-node=false属性来阻止事件冒泡。这一技巧在处理复杂的树形结构时尤其有效。

当我们的操作是这样的时候：

当我们想要点击新增或是删除的时候，有子节点的节点会触发展开收缩的事件，那么我们就要阻止冒泡了，只需要加上

expand-on-click-node="false"就可以如图：

Vue+element ui 可编辑树结构
weixin_39166851的博客
05-19 3695
实现树结构可以编辑主要思想就是 - 树结构开启可自定义模式，操作某一层级的时候显示不同的内容（其实也就是不同的操作按钮和输入框），在我们操作结束时，将更改数据存入后端，完成增删改功能，树结构刷新
vue实现树形下拉框 可多选 封装组件及应用
冉冉胜起博客
12-09 6301
效果图： 封装组件：TreeSelect.vue <!-- /** * 下拉选择树形组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用 * @date 2020-12-09 * 调用示例： * <tree-select :height="400" // 下拉框中树形高度 * :width="200" // 下拉框中树形宽度 * :data="data" //
el-tree 点击父节点无效，只能选中子节点
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
09-03 533
el-tree点击父节点不执行，点击子节点执行。根据点击事件获得的变量判断是否满足条件，满足的执行，不满足的不执行。
Element-UI组件，创建三级树形目录拆坑记录,删除目录使用Mybatis plus 的逻辑删除
weixin_44142032的博客
09-16 1307
目录踩坑 规定某一节点展开，配置好逻辑无错误却失效Element-ui 插件的使用 踩坑 规定某一节点展开，配置好逻辑无错误却失效 <el-tree :data="menus" :props="defaultProps" show-checkbox="true" node-key="catId" :default-expand-all="false" :expand-on-click-node="false" :de
element-ui的Tree 树形控件禁止折叠
weixin_45884508的博客
12-15 2741
是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
el-tree 阻止点击节点的时候自动展开或者收缩
QQ2856639881的专栏
10-06 1万+
expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 但设置的时候，要加上: 不然无效 <!--这样可以--> <el-tree :expand-on-click-node="false" ...> <!--这样无效--> <el-tree expand-on-click-node="false" ...>...
ElementUI Tree 树形控件的使用并给节点添加图标
10-15
在本文中，我们将深入探讨如何在Vue项目中利用ElementUI库的Tree组件来创建树形结构，并且重点讲解如何为树形结构的各个节点添加图标。 ElementUI的Tree组件是一个强大的工具，它允许开发者以树状结构展示数据，...
elementUI中Tree 树形控件点击叶子节点才触发
qq_41853447的博客
11-18 5423
点击子节点才触发 想要实现这个功能，首先需要看点击这个节点下面是否存在节点，所以重点是需要拿到点击这个节点的node，node节点下面有一个 childNodes集合，这个集合保存的就是子节点数据，如果这个集合里面没有数据，说明当前节点就是子节点。官网提供 getNode()方法获取node。 getNode使用 需要在组件上指定 node-key属性和ref属性，这个属性必须和指定的label值相同。 完整代码 <template> <div> <e
ElementUI Tree 树形控件使用及节点图标添加详解
资源摘要信息:"ElementUI Tree 树形控件的使用并给节点添加图标"是一篇详细介绍如何在 Vue.js 项目中使用 Element UI 框架中的 el-tree 组件实现树形结构展示，并进一步扩展功能为节点添加自定义图标的实战性技术...
ElementUI el-tree 树形控件给节点添加图标
林中明月间丶
06-04 969
https://avuejs.com/doc/tree 这个基于Element的二次封装可以看看
element-ui的Tree树形控件触发指定节点点击处理
热门推荐
sunshine-zwq的博客
12-01 1万+
项目需求 有个多路搜索框（从服务器搜索），可支持同时根据关键字搜索科室和医生，页面左侧是科室树，右侧是医生列表表格，当选择关键字搜索结果的某个科室（可获取到科室id），需要触发选中左侧的科室节点，并查询出相应的科室所有医生信息。所以这个不适合直接采用element-ui的节点过滤搜索框来过滤节点，而element-ui也没有直接根据tree节点值触发节点点击的事件，所以需要额外写代码来实现这个交互效果。 效果图 主要实现代码 <template> <el-select clas
element-ui的Tree在自定义组件时，使用render-content后防止触发expand-on-click-node的方式
weixin_42643176的博客
06-19 7548
先看问题 在使用element-ui的Tree组件添加一些按钮的时候，比如这样： 这个时候如果设置了expand-on-click-node属性为true的话，点击按钮会同步触发节点的展开收缩事件。 如果使用的是scoped slot的话可以直接使用.stop修饰符。但使用的是render-content该怎么添加.stop呢？ 解决方法 传入一个$event，然后在点击事件中添加： 然后再阻止一下事件冒泡就好啦～ append(data, event) { event.stopPro
elementui 树形结构阻止收缩展开
LJJONESEED的博客
11-17 1886
【代码】elementui 树形结构阻止收缩展开。
elementui的组件自带的点击事件怎么防止事件冒泡
xxitcef的博客
08-06 1万+
vue中阻止事件冒泡是需要在click点击事件加上.stop就可以， <div @click=""> 父级 <div @click.stop="">子级</div> </div> 在使用element ui时，组件有很多自带的点击事件，要阻止事件冒泡就需要在组件外层套一个div，然后同样的加上@click.stop就好了 <div @click.stop> <el-dropdown></el-dropdown>
element-ui 阻止树节点收缩
一只努力的小Java
11-17 1039
element-ui 阻止树节点收缩 添加属性:expand-on-click-node=“false”。 如图：
el-tree 点击树的文字不要收缩仅点击图标的时候收缩
yuyu_2019的博客
03-23 2928
expand-on-click-node：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> ...
elementui 的 tree 组件如何用代码改变某个节点的展开状态
brilliantSt的博客
08-20 1574
elementui 的 tree 组件如何用代码改变某个节点的展开状态
el-tree取消单击展示树结构
简单点的博客
02-26 603
el-tree取消单击展示树结构
elementUi的tree组件动态设置展开折叠失效
zoooo_的博客
01-07 5567
elementUi的tree组件动态设置展开折叠失效
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值