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

最新推荐文章于 2024-09-25 00:35:35 发布

原创最新推荐文章于 2024-09-25 00:35:35 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

Element 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在 Element UI 的 el-tree 组件中禁用点击节点的默认展开行为，以便仅通过箭头图标控制节点状态。详细说明了 `expand-on-click-node` 属性的应用和其默认值的更改。

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yuyu_2019

关注关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构

高级前端工程师

03-20

3898

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

1017

思路通过el-tree来选择所需要的节点和获取数据，将el-select的选择关闭，防止点击时报错，通过el-tree获取的数据来关联el-select并渲染输入框的内容，而不是通过option来获取数据（所以el-option的状态时disabled）。是否在点击节点的时候展开或者收缩节点，默认值为true，如果为false，则只有点箭头图标的时候才会展开或者收缩节点。接上篇文章需求，选择树形结构的时候有多选的情况，用上一篇的单选并不能解决问题，下图是这次达到的效果。...

1 条评论您还未登录，请先登录后发表或查看评论

Element-UI组件，创建三级树形目录拆坑记录,删除目录使用Mybatis plus 的逻辑删除

weixin_44142032的博客

09-16

1292

目录踩坑规定某一节点展开，配置好逻辑无错误却失效Element-ui 插件的使用踩坑规定某一节点展开，配置好逻辑无错误却失效 <el-tree :data="menus" :props="defaultProps" show-checkbox="true" node-key="catId" :default-expand-all="false" :expand-on-click-node="false" :de

vue实现树形下拉框可多选封装组件及应用

冉冉胜起博客

12-09

6288

效果图：封装组件：TreeSelect.vue <!-- /** * 下拉选择树形组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用 * @date 2020-12-09 * 调用示例： * <tree-select :height="400" // 下拉框中树形高度 * :width="200" // 下拉框中树形宽度 * :data="data" //

Vue+element ui 可编辑树结构

weixin_39166851的博客

05-19

3676

实现树结构可以编辑主要思想就是 - 树结构开启可自定义模式，操作某一层级的时候显示不同的内容（其实也就是不同的操作按钮和输入框），在我们操作结束时，将更改数据存入后端，完成增删改功能，树结构刷新

element-ui的Tree 树形控件禁止折叠

weixin_45884508的博客

12-15

2692

是否在点击节点的时候展开或者收缩节点，默认值为 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" ...>...

【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置

2401_87288719的博客

09-25

1520

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了编辑情况

element-ui的el-tree节点含有图片，收起展开图片会卡顿

qq_43151592的博客

04-24

889

解决element-ui的el-tree节点含有图片，收起展开图片会卡顿

【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞使用vue-content-menu定制可编辑树结构editableTree

热门推荐

Sabrina_cc的博客

12-03

2万+

本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree

在vue中修改el-tree前面的图标以及高亮点击的节点，点击父节点前图标展开和收缩子节点，点击父节点内容不展开和收缩子节点

weixin_43412413的博客

08-13

5525

默认图标：修改后的图标：代码： /*树节点前面的图标修改*/ .el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .el-tree .el-icon-caret-right:before { b...

el-tree 点击左侧三角才会展开/收起，点击文字只是筛选

m0_70752874的博客

04-08

479

【代码】el-tree 点击左侧三角才会展开/收起，点击文字只是筛选。

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

small_33的博客

08-04

1万+

当我们的操作是这样的时候：当我们想要点击新增或是删除的时候，有子节点的节点会触发展开收缩的事件，那么我们就要阻止冒泡了，只需要加上 expand-on-click-node="false"就可以如图：

【antd-vue】 a-tree 点击节点文字展开或收缩子节点

m0_67391683的博客

03-06

2881

问题描述 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

583

毕业论文是每位大学生都会面临的重要话题。论文想要写得好，除了内容质量高，得体的排版同样不能少。一般来说，每个高校会对毕业论文的格式有所要求并且会给出一份模板或格式说明，对论文的标题、正文、图表等格式进行规范。那么，如何快速准确地实现这些要求呢？我们就从零开始搞定论文的排版问题。首先要明确一点，Word排版并不是简单地修改字体和段落格式，而是将文章的标题、正文、图表等内容进行明确的划分，各成一派又一...

elementui el-tree 加搜索时，点击选中后全部收缩

yusun1234的博客

04-28

1041

<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 全部打开状态不要折叠

有问题可关注公众号：前端研究院后台输入问题回复

07-14

2227

<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

1203

在 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的演示地址项目地址好了，如果看完演示到这里你觉得正好符合你的功能要求，就可以继续往下看了，虽...

VUE3 el-tree自定义展开/收缩图标

最新发布

08-08

在 Vue3 中使用 `el-tree` 组件时，可以通过插槽来自定义展开和收缩的图标。Element Plus 提供了 `default-expand-all` 和 `icon` 插槽，可以用来控制树的展开状态以及自定义图标。 ### 自定义展开和收缩图标的方法 1. **使用 `icon` 插槽**：`el-tree` 提供了 `icon` 插槽，可以用来自定义展开和收缩时的图标。 2. **通过 `expanded` 属性控制节点展开状态**：可以使用 `default-expand-all` 属性来默认展开所有节点，或者通过 `expanded-keys` 属性手动控制展开的节点。 ### 示例代码以下是一个自定义展开和收缩图标的示例代码： ```vue <template> <el-tree :data="treeData" :props="defaultProps" default-expand-all node-key="id" >  <template #icon> <span class="el-tree-node__expand-icon"> <i :class="isExpanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i> </span> </template> </el-tree> </template> <script setup> import { ref } from 'vue'; // 树的数据 const treeData = ref([ { id: 1, label: '一级 1', children: [ { id: 4, label: '二级 1-1', children: [ { id: 9, label: '三级 1-1-1', }, { id: 10, label: '三级 1-1-2', }, ], }, ], }, { id: 2, label: '一级 2', children: [ { id: 5, label: '二级 2-1', }, { id: 6, label: '二级 2-2', }, ], }, ]); // 默认的 props 配置 const defaultProps = { children: 'children', label: 'label', }; // 用于判断节点是否展开 const isExpanded = ref(true); </script> <style scoped> .el-tree-node__expand-icon { margin-right: 8px; } </style> ``` ### 说明： - **`icon` 插槽**：通过 `#icon` 插槽，可以自定义展开和收缩的图标。这里使用了 Element Plus 提供的 `el-icon-arrow-down` 和 `el-icon-arrow-right` 图标。 - **`isExpanded` 状态**：`isExpanded` 是一个响应式变量，用于判断当前节点是否处于展开状态。可以通过监听节点的展开/折叠事件来动态更新 `isExpanded` 的值。 - **`default-expand-all` 属性**：设置 `default-expand-all` 为 `true` 可以默认展开所有节点。 ### 进一步扩展如果需要根据节点的状态动态改变图标，可以通过监听 `node-expand` 和 `node-collapse` 事件来更新 `isExpanded` 的值。例如： ```vue <template> <el-tree :data="treeData" :props="defaultProps" node-key="id" @node-expand="handleExpand" @node-collapse="handleCollapse" > <template #icon="{ node }"> <span class="el-tree-node__expand-icon"> <i :class="node.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i> </span> </template> </el-tree> </template> <script setup> import { ref } from 'vue'; // 树的数据 const treeData = ref([ { id: 1, label: '一级 1', children: [ { id: 4, label: '二级 1-1', children: [ { id: 9, label: '三级 1-1-1', }, { id: 10, label: '三级 1-1-2', }, ], }, ], }, { id: 2, label: '一级 2', children: [ { id: 5, label: '二级 2-1', }, { id: 6, label: '二级 2-2', }, ], }, ]); // 默认的 props 配置 const defaultProps = { children: 'children', label: 'label', }; // 处理展开事件 const handleExpand = (node) => { node.expanded = true; }; // 处理折叠事件 const handleCollapse = (node) => { node.expanded = false; }; </script> <style scoped> .el-tree-node__expand-icon { margin-right: 8px; } </style> ``` ### 总结通过 `el-tree` 的 `icon` 插槽，可以轻松自定义展开和收缩的图标。结合 `node-expand` 和 `node-collapse` 事件，可以实现更复杂的动态图标切换逻辑。这种方法不仅适用于 Vue3，也适用于 Element Plus 的其他版本。