element tree 重置节点高亮状态

原创 已于 2022-02-15 11:40:37 修改 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

于 2021-07-12 16:19:21 首次发布
在Vue项目中，利用ElementUI的el-tree组件并结合阿里巴巴的Iconfont实现自定义节点。当弹窗关闭时，需要清除tree节点的高亮状态。通过绑定的ref 'deptTree' 进行操作。

在这里插入图片描述
图标是用了el-tree的自定义节点内容+阿里巴巴的iconfont：

<span class="custom-tree-node" slot-scope="{ node, data }">
    <i class="iconfont" :class="data && data.children? 'icon-wenjianjia': 'icon-wenjian'"></i>
    <span class="text">{{ node.label }}</span>
</span>


弹窗关闭时，想将节点的高亮状态去掉，使用

   this.$refs.deptTree.setCurrentKey(null);

'deptTree’为在el-tree上绑定的ref

【elementui】element ui重置tree
Meditation_Crazy
05-13 3176
前言 在点击一条数据时，希望tree默认打开选中的，这个已经实现。 现在的问题是，点击一条就打开一部分，前面数据打开的node节点没有关闭。 解决办法： 把tree的数据data先备份一下，然后清空它，接着再赋值，这样它已经展开的数据就没了。 resetTree() { let _treeData = JSON.parse(JSON.stringify(this.treeData)) this.treeData = [] this.treeData = _treeDa.
element Tree 树形控件 折叠、展开 全选、清空
weixin_53561783的博客
07-24 2970
【代码】element Tree 树形控件 折叠、展开 全选、清空。
el-tree后续需求之解决（更新节点数据、默认选中节点）
Bonjourjw的博客
11-30 1万+
一 背景        el-tree的数据来源，通过后台获取，之前考虑由于刷新数据造成页面闪动的问题，处理方法为不实时刷新el-tree的数据（只考虑到了添加）。         添加一个treeNode时，成功后，调用后台的getTree重新获取最新数据newData，遍历找到新增的目标对象，将其获取作为当前选中节点的子Node。这样没有刷新整棵树，保证页面不会晃动。 二 引发问题：...
el-tree设置节点默认选中并高亮效果
maohangfei.cn
11-08 4723
【代码】el-tree设置节点默认选中并高亮效果。
el-tree取消选中节点和取消选中节点的高亮
developinggirl的博客
03-06 1624
elementui
el-tree 限制子节点不高亮
03-28
首先，用户希望禁止子节点高亮，同时可能希望父节点在点击时保持高亮状态。我需要回顾相关的element-ui文档和用户提供的引用内容，找到对应的解决方法。 根据引用[3]中的信息，el-tree组件使用highlight-current...
vue3 el-tree 选中的节点和父级都高亮
08-29
但是，上述方法在节点展开/折叠时可能会丢失高亮状态，因为el-tree在重新渲染节点时，我们的`highlightNodes`数组并没有改变，所以高亮样式应该还在。但是，当选中新节点时，我们会更新数组。 另外，我们也可以...
如何在el-tree中实现多级父节点的高亮效果？
08-29
在 Vue3 的 Element Plus 的 `el-tree` 组件中实现多级父节点高亮效果，可以通过以下方法实现，结合引用内容中的关键技术和最佳实践： ### 完整解决方案 ```vue <el-tree ref="treeRef" :data="treeData" :...
el-tree匹配节点及其所有父级与子级自动显示
最新发布
12-04
<title>Element Plus Tree 节点过滤 - 匹配节点及其父级与子级 <!-- 引入Element Plus样式 --> <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> .tree-container { max-width...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 2万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
elementUI中el-tree树形默认初始化高亮赋值
c_qianxia5040的博客
02-14 4505
setCurrentKey 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性。node-key=“id” 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。highlight-current 是否高亮当前选中节点，默认值是 false。ref=“tree” 方便后面取值。第二步：设置当前高亮的节点。第三步、样式修改（非必须）第一步、添加相应属性。
el-tree设置、取消选中状态（高亮）
weixin_42792507的博客
07-12 1万+
在一个项目中, 有一个需求: 点击一个表格的每一行, 动态设置树节点的选中状态 设置节点的选中状态可以直接使用setCurrentKey方法, 根据node-key设置 this.$refs.tree.setCurrentKey(2); 如果要取消选中状态,只需要设置成null就可以 this.$refs.tree.setCurrentKey(null); 在做取消选中状态时, 原本是使用原生js来移除选中状态的class, 然后报错: Uncaught TypeError: Cannot read p
el-tree点击节点高亮，再次点击取消高亮
ssssummer的博客
07-03 3228
【代码】el-tree点击节点高亮，再次点击取消高亮。
清除element plus Tree 树形组件高亮选中状态
qq_42669320的博客
08-06 1453
this.$refs.tree.setCurrentKey(null);
el-tree刷新数据后选中节点样式丢失，重置，无效
weixin_44113950的博客
11-30 2337
el-tree在重新获取后原本节点的选中状态会随着丢失，查看官方文档尝试用了这两个方法后没有效果 这里的选中大概只支持show-checkbox所以这里需要自己去添加样式。
el-tree设置默认高亮，并在点击其他节点后取消高亮
qq_43977829的博客
06-24 2689
html部分其中： @node-click=“handleClickChange”， current-node-key=“海淀区” 和highlight-current为关键代码 js部分在点击事件里将默认高亮的节点置空
el-tree 树取消高亮
梦寻汝的博客
12-02 927
主要代码就是取消高亮把。
vue + elementui 中 在弹框中使用了 tree型结构(＜el-tree＞＜/el-tree＞)，点击关闭按钮按钮重置tree
weixin_45041493的博客
08-16 864
vue 项目中使用了element-ui 中 tree，选择了懒加载的模式。解决的思路为：通过v-if 的显示隐藏来控制重新加载。通过点击重置按钮，使得tree 重新加载。通过点击按钮，使得 tree 重新加载。
重置时把el-tree树节点选中状态取消
m0_67841039的博客
10-15 4823
在某些情况下，你可能需要在 DOM 更新后清空选中状态，这时可以使用。当你重置树的数据时，可以同时清空选中状态，以确保树的状态完全重置。如果需要更细粒度的控制，可以遍历所有节点，并手动清除其选中状态。如果树组件在对话框中，可以在对话框显示时清空选中状态。根据你的具体需求和树的配置，选择最适合的方法来重置。如果要取消所有选中状态，可以将其设置为。如果你需要设置某个节点为选中状态，可以使用。要重置 Element UI 的。方法来清空所有选中的节点。并取消所有节点的选中状态。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值