el-tree 点击树的文字不要收缩仅点击图标的时候收缩

最新推荐文章于 2024-12-31 01:34:50 发布
最新推荐文章于 2024-12-31 01:34:50 发布
阅读量2.7k 收藏 3
点赞数 5
CC 4.0 BY-SA版权
分类专栏： Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/115125692
本文介绍了如何在 Element UI 的 el-tree 组件中禁用点击节点的默认展开行为，以便仅通过箭头图标控制节点状态。详细说明了 `expand-on-click-node` 属性的应用和其默认值的更改。

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

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>
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 3640
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
el-select和el-tree结合使用-树形结构多选框
m0_67390969的博客
08-01 966
思路通过el-tree来选择所需要的节点和获取数据，将el-select的选择关闭，防止点击时报错，通过el-tree获取的数据来关联el-select并渲染输入框的内容，而不是通过option来获取数据（所以el-option的状态时disabled）。是否在点击节点的时候展开或者收缩节点，默认值为true，如果为false，则只有点箭头图标的时候才会展开或者收缩节点。接上篇文章需求，选择树形结构的时候有多选的情况，用上一篇的单选并不能解决问题，下图是这次达到的效果。...
ElementUI：el-tree使用render-content后防止触发expand-on-click-node的方式
一些平时在开发过程中遇到的常见问题，分享给大家
12-31 251
ElementUI：el-tree使用render-content后防止触发expand-on-click-node的方式
layui.tree扩展节点展开、关闭方法
jingfeng8087的博客
04-28 4710
在使用layui提供tree插件时，发现在实际情况中使用会产生需求满足不了的情况，于是乎需要扩展插件源码，已满我们的实际业务需求。 打开tree.js找到 注意这里使用原型模式，再找到展开收缩方法 添加spreadClose方法，用于节点收缩的回调。 在这里加入展开节点的方法，用于节点展开的回调，然后就是调用。 此时就可以监听节点展开收缩事件了。 ...
element-ui的Tree 树形控件禁止折叠
weixin_45884508的博客
12-15 2484
是否在点击节点的时候展开或者收缩节点， 默认值为 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" ...>...
【antd-vue】 a-tree 点击节点文字展开或收缩子节点
m0_67391683的博客
03-06 2814
问题描述 a-tree 组件默认点击切换图标展开或收缩，如何做到点击节点文字也展开或收缩。 解决方法 在 onSelect 方法中调用 onExpand 方法 <template> <a-tree @select="onSelect" /> </template> <script> export default { methods: { onSelect(selectedKeys, {node}) { node.onExpan
el-tree设置某节点不能折叠_从头开始搞定毕业论文Word排版：页面设置和样式
weixin_39611031的博客
01-13 564
毕业论文是每位大学生都会面临的重要话题。论文想要写得好，除了内容质量高，得体的排版同样不能少。一般来说，每个高校会对毕业论文的格式有所要求并且会给出一份模板或格式说明，对论文的标题、正文、图表等格式进行规范。那么，如何快速准确地实现这些要求呢？我们就从零开始搞定论文的排版问题。首先要明确一点，Word排版并不是简单地修改字体和段落格式，而是将文章的标题、正文、图表等内容进行明确的划分，各成一派又一...
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
2401_87288719的博客
09-25 1465
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了编辑情况
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 2万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
element-ui的el-tree节点含有图片，收起展开图片会卡顿
qq_43151592的博客
04-24 757
解决element-ui的el-tree节点含有图片，收起展开图片会卡顿
elementui el-tree 加搜索时，点击选中后全部收缩
yusun1234的博客
04-28 1021
<el-tree :data="list" :props="defaultProps" :highlight-current="isHight" :expand-on-click-node="false" @node-click="handleNodeClick" ref="tree12" class="filter-tree" :filte.
父组件控制el-tree折叠
qq_45847565的博客
02-17 748
昨天没搞会的今天搞明白了 背景： el-tree有默认选中及展开的功能，在编辑成员时传参，选中及展开，但是在新建成员时，需要都折叠以及全部取消选中，在昨天的文章描述了取消选中，今天来看看折叠。 取消选中及其他用到的el-tree功能 解决思路： 用this.$refs.child可以访问到子组件，再在此基础上访问$refs.tree可以访问到当前的el-tree，控制台打印tree： 可以见到root属性保存了当前树的节点信息，childNodes为子节点的数组，expanded属性保存了当前节点是否展开
el-tree 全部打开状态 不要折叠
有问题可关注公众号：前端研究院 后台输入问题回复
07-14 2120
<el-tree :data="setTree" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange" ...
vue el-tree新增节点后不折叠刷新
weixin_42613017的博客
01-11 1152
在 Vue 项目中使用 el-tree 新增节点后如果不想自动折叠，可以在新增节点后手动调用 el-tree 的展开方法，例如 $refs.tree.expandNode(node)。 如果你想让 el-tree 新增节点后自动展开，可以在 el-tree 上设置 default-expand-all 属性为 true。 之后刷新树形结构可以使用 $forceUpdate() 一般使用在父组件上的...
layui 树形表格 treeTable使用详细指南，不能折叠解决办法
Java开发，人工智能，边缘计算，致力于掌握前沿技术
09-25 1万+
最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。 首先看下treeTable的 演示地址 项目地址 好了，如果看完演示到这里你觉得正好符合你的功能要求，就可以继续往下看了， 虽...
el-tree里面选择复选框的时候同时选中文字
m0_61625235的博客
06-08 606
el-tree里面选择复选框的时候同时选中文字
element-ui的Tree在自定义组件时，使用render-content后防止触发expand-on-click-node的方式
weixin_42643176的博客
06-19 7497
先看问题 在使用element-ui的Tree组件添加一些按钮的时候，比如这样： 这个时候如果设置了expand-on-click-node属性为true的话，点击按钮会同步触发节点的展开收缩事件。 如果使用的是scoped slot的话可以直接使用.stop修饰符。但使用的是render-content该怎么添加.stop呢？ 解决方法 传入一个$event，然后在点击事件中添加： 然后再阻止一下事件冒泡就好啦～ append(data, event) { event.stopPro
vue+echarts tree点击节点高亮和节点不缩放让容器放大
weixin_42979818的博客
11-20 2149
//使用之前先在main.js中引入echats //然后 Vue.use(echats) var mycharts = this.echarts,init(document.getElementById("myChart")) myChats.setOption({ echats官网找实例 //设置高亮色和平常色 itemStyle：{ normal:{ color:'#b22125' ...
el-tree 修改收缩图表
最新发布
03-29
### 如何修改 el-tree 组件的收缩和展开图标 在 Element UI 的 `el-tree` 组件中，默认情况下会显示一个折叠/展开的小箭头作为节点的操作图标。如果希望自定义这些图标，可以通过覆盖默认样式或者通过插槽机制实现。 #### 方法一：通过 CSS 覆盖默认样式 可以利用 `.el-tree-node__expand-icon` 类名来调整默认的折叠/展开图标。以下是具体方法： ```css /* 移除默认的旋转效果 */ .el-tree /deep/ .el-tree-node__expand-icon { display: none; } /* 添加自定义图标 */ .el-tree /deep/ .el-tree-node__expand-icon:before { content: "\e78b"; /* 替换为你想要的字体图标 Unicode 编码 */ font-family: element-icons !important; /* 使用 Element 提供的字体库 */ } /* 展开状态下的图标 */ .el-tree /deep/ .is-expanded .el-tree-node__expand-icon:before { content: "\e6d9"; /* 更改展开后的图标编码 */ } ``` 上述代码实现了隐藏默认图标并替换为新的自定义图标[^2]。 --- #### 方法二：通过作用域插槽 (Scoped Slot) 实现更灵活的控制 除了简单的样式更改外，还可以完全移除默认图标并通过模板重新渲染一个新的图标控件。以下是一个完整的例子： ```vue <el-tree :data="treeData" default-expand-all> <!-- 定义树节点的内容 --> <span class="custom-tree-node" slot-scope="{ node, data }"> <!-- 自定义图标逻辑 --> <i v-if="!node.isLeaf" @click.stop="toggle(node)" :class="[node.expanded ? 'icon-collapse' : 'icon-expand']" ></i> <!-- 显示节点名称 --> <span>{{ node.label }}</span> </span> </el-tree> ``` 在此示例中，我们手动创建了一个 `<i>` 标签用于表示展开或折叠按钮，并绑定点击事件以调用 `toggle()` 函数完成切换操作[^1]。 同时需要注意的是，在某些场景下可能还需要扩展容器区域以便于用户更容易触碰到目标位置。这通常涉及对`.el-tree-node__label`样式的重写: ```css .my-app .el-tree-node__label { flex: 1; /* 让标签占据更多空间 */ } ``` 此部分已在引用材料中有提及[^4]。 --- ### 总结 无论是采用纯CSS方式还是借助Vue的作用域插槽功能都可以很好地满足对于el-tree组件内部图标定制化需求。前者适合快速简单变更而后者则提供了更大灵活性允许开发者进一步增强交互体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值