很有用！element el-tree树结构刷新后或者添加或者删除后需要刷新后保留展开状态解决方法

最新推荐文章于 2025-05-14 11:11:05 发布
原创 最新推荐文章于 2025-05-14 11:11:05 发布 · 2.6k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js

在使用Element UI的el-tree组件时，更新数据后树节点会自动折叠。为了解决这个问题，需要记录并恢复节点的展开状态。具体解决方法可参考相关博客文章。
element的el-tree树结构-添加或删除子节点后(也就是数据刷新后)-保持节点状态不发生改变
m0_67063319的博客
08-09 3823
利用node-expand和node-collapse监听树展开和关闭的状态; 把展开的节点id push给defaultExpandKeys,保持展开状态; 再次点击此节点时-再从defaultExpandKeys数组内对应的id(节点)扔出去;
el-tree使用过滤结束tree全部展开bug修复
qq_30351747的博客
02-11 2516
el-tree使用过滤结束tree全部展开bug修复 描述 el-tree使用过滤，当过滤结束，清空输入框时，显示全部数据。但是此刻tree结构全部展开，不是关闭，需求是得全部关闭 图示 逻辑 1、el-input绑定input事件，监听其值，当为空时就触发事件，让所有节点全部关闭。 代码 hChangeIndexSearch(){ if(this.filterText == ''){ var nodes = this.$refs.myIndexTree.store.nodesMap;
el-tree刷新数据之后保持之前的打开状态
思渝崖
08-21 7176
简而言之就是利用:default-expanded-keys=“expandedList” 这个默认展开的属性 然后用expandedList 数组记录你的展开情况 在数据刷新之后，el-tree 会自动根据这个属性值的数组展开选项 话不多说，上代码： <template> <el-tree ref="navigationTree" :default-ex...
tree组件新增节点后依旧展开原来节点
yixiaojing527的博客
11-23 622
组件内部有一个:default-expanded-keys方法就是默认展开的节点，思路就是每次点击节点的时候把绑定的数组里添加或者删除对应的id，如果已有就代表是折叠，需要删除这个默认展开，如果没有就添加到:default-expanded-keys=绑定的数组里去 data里给dxk为空数组 点击节点的时候这个flag必须要判断状态，不能无脑的push，不然永远无法折叠节点！！！！！ ...
element el-tree树结构刷新后保留展开状态解决方法
weixin_48639502的博客
01-09 2362
我们在使用element的el-tree组建的时候，当我们给树结构重新赋值后，树节点就全部自动合上了。3.method函数。
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
总结，要确保Element-ui的`el-tree`组件在新增或删除节点后正确刷新，关键是正确地修改数据源，并根据情况更新受影响的节点状态。同时，确保使用的是支持这一功能的最新Element-ui版本。在实际开发中，遇到问题时，...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
在这个场景下，可以将生成el-tree数据结构的过程封装成一个单独的方法，接受节点列表作为输入，返回处理后的树形结构。这样，当需要在其他地方使用相同的数据格式时，可以直接调用此方法，避免重复代码。 以下是一...
vue项目el-tree添加或者删除子节点后仍然保持当前节点展开，树不收回去的解决方法
m0_60699903的博客
02-09 5994
element-ui中的el-tree在添加或者删除子节点后，也就是每次数据刷新后树就会收上去，但是如果我们还需要在当前节点下进行后续操作，而且有很多层节点的情况下，就很麻烦了，对用户体验感非常差，那么怎么解决呢？ ...
vue项目中使用element UI中的el-tree刷新后保持节点展开状态
qq_45959912的博客
01-13 5308
el-tree刷新后保持节点展开状态 最近在搞一个前后端分离的项目，有一个菜单页面，使用的是element UI中的el-tree，但是在刷新后父节点关闭了展开状态，这让我很苦恼啊，找了很多资料，没有找到适合我这个情况的，于是采用了一种用sessionStorage存储点击了哪个就让哪个展开的方法，代码如下 首先，需要将点击的一级节点的某一个属性值保存到sessionStorage中，我采用的是id（因为菜单列表是动态获取的） 然后在点击链接跳转到另一个页面后，在取出id值 重要的是 在el-tree使
el-table刷新后tree保持原有的展开样式
m0_73854403的博客
12-21 1003
【代码】el-table刷新后tree保持原有的展开样式。
vue+ElementUI 刷新后tree树保存节点展开
热门推荐
树洞博客
08-10 1万+
1.用官网提供的参数定义一个数组，然后点击树节点时，保存下来，存进数据内，刷新后树之前展开的节点就能还是展开的状态。 2. this.idArr.push(this.form.parentid);//保存树节点的展开 this.form.parentid是当前点击的节点id，放到idArr里面、 注意：如果保存节点不管用，可以查看Tree是否添加了node-key=...
el-tree刷新树默认展开/保留当前操作节点获取展开的节点
Ruby_zst的博客
12-18 2251
default-expanded-keys="defaultShowNodes"指定需要默认展开的数组。一定要加node-key,代表唯一的值，一般都是id。分别是展开节点时触发和收起节点时触发。
el-tree组件更新数据后保留展开状态
x11819130的博客
02-14 1317
【代码】el-tree组件更新数据后保留展开状态。
＜el-tree＞调取接口后保持展开状态
yiyan_hualuo的博客
05-14 173
【代码】＜el-tree＞调取接口后保持展开状态。
elementUI,点击表格展开，刷新的时候也展开点击过的表格。点击箭头，或者表格这一行都可以。
qq_42143163的博客
12-30 2495
<template> <el-table :data="dataList" style="width: 100%" ref="refTable" row-key="id" :expand-row-keys="expands" @row-click="rowClick" @expand-change="expandChange"> ...
Element UI树形表格刷新自动展开
CodeVis
06-24 2293
项目上线初期，有个树型表格，修改一列之后，重新获取数据，已经展开的列会自动闭合。使用体验很差。于是查文档查到了 toggleRowExpansion 和 expand-change 注意：row-key 是必须的 首先使用 expand-change 将客户点击展开、关闭的列，用一个变量存储起来 defaultExpandedKeys(expandedRows, expanded) { const number = this.defaultExpandedKeysList.indexOf(
Element UI el-tree 保存当前展开节点，再次异步获取树结构数据时默认展开当前保存的节点
ZionHH的博客
11-14 6401
之前的一篇博客写了 el-tree 默认展开节点 https://blog.csdn.net/z291493823/article/details/102862325 项目有新需求，要添加删除树结构的数据，但是每次操作完再请求数据，树又回到了初始状态，于是想到把当前展开的节点保存起来，再请求回来就默认打开了 <el-tree ref="tree" v-loading="treeLoadi...
在el-tree的data刷新后不要改变当前已经展开的节点
最新发布
09-05
<think> 首先，用户的问题是关于 Element UI 的 el-tree 组件的。用户想了解在刷新 el-tree 的 data 后如何保持当前已展开的节点不变。 用户提到了几个引用： - 引用[1]：讨论在新增、编辑、删除节点后如何局部刷新 el-tree，而不是刷新整个树。删除功能需要后端请求，但重点是局部刷新。 - 引用[2]：针对懒加载场景，展示了如何刷新单个节点而不是整个树。方法包括设置 node.loaded = false 然后调用 node.expand() 来重新加载该节点。 - 引用[3]：类似引用[2]，强调在懒加载中如何刷新单个节点。 用户的实际需求：用户想查找在 el-tree 的 data 刷新后不改变当前已展开节点的方法。也就是说，在更新数据源后，重新渲染树时，保持当前展开的状态不变。 我的回答需要基于这些引用和用户的问题。参考用户上一次问题和我的回答，但在这个新对话中，用户上一次问题是这个本身，所以我需要直接回答。 结构化回答： 1. **理解问题**：解释用户的需求——如何在数据刷新后保持树节点的展开状态。 2. **解决方案**：根据引用，提供一个方法。核心是避免刷新整个树，而是局部刷新相关节点。Element UI 的 el-tree 提供了机制来管理节点的加载和展开。 - 对于懒加载树（lazy load），可以使用 node.loaded = false 然后 node.expand() 来刷新单个节点（如引用[2]和[3]所示）。 - 用户没有提到懒加载，但问题相似。可能用户的数据是静态加载的？引用中提到懒加载，但用户的问题是关于 data 刷新后保持展开节点，所以需要适应所有场景。 3. **关键点**：在更新 data 后，el-tree 会重新渲染整个树，导致展开状态丢失。解决方法是通过编程方式控制节点的展开状态。 - 方法一：在刷新前保存当前展开节点的 key 或 id，然后在刷新后恢复这些展开状态。 - 方法二：使用局部刷新而不是整个树刷新，类似于引用中提到的。 4. **步骤实现**： - **保存展开状态**：使用 el-tree 的 getCheckedKeys 或 getExpandedKeys 方法来获取当前展开的节点 keys。 - **刷新数据**：更新树的数据源（data）。 - **恢复展开状态**：使用 setCheckedKeys 或 setExpandedKeys 方法设置回展开状态。 - 引用中没有直接提到这个方法，但这是 Element UI 文档支持的。我可以检查 Element UI 文档来确认。 Element UI 文档：el-tree 有 `setExpandedKeys(keys)` 方法来设置展开的节点 keys。 用户提到“el-tree的data刷新后”，意思是当 data 属性改变时，树会重新渲染，导致状态丢失。所以，在改变 data 前保存展开 keys，改变后恢复。 5. **代码示例**：提供一个简单的示例代码。 6. **注意事项**：如果是懒加载树，可能需要额外处理，但用户问题没有指定懒加载。所以，提供通用方法。 7. **相关问题**：按照系统指令，在最后添加相关问题。 回答结构： - 开头解释问题。 - 给出解决方案。 - 提供代码示例（使用 Markdown 代码块）。 - 结束语。 - 添加相关问题。 确保使用中文回答。 最终回答： - 为了解决 el-tree 在数据刷新后保持展开状态的问題，可以在刷新数据前保存当前展开的节点 keys，然后在数据刷新后恢复这些 keys。具体步骤如下： 1. 使用 `this.$refs.tree.getExpandedKeys()` 获取当前展开的节点 keys。 2. 更新树的数据（例如，修改 data 属性）。 3. 使用 `this.$refs.tree.setExpandedKeys(expandedKeys)` 设置回展开状态。 - 代码示例： ```vue <template> <el-tree :data="treeData" ref="tree" node-key="id" default-expand-all></el-tree> <button @click="refreshData">刷新数据</button> </template> <script> export default { data() { return { treeData: [ // 初始数据 { id: 1, label: '节点1', children: [{ id: 2, label: '节点1-1' }] } ] }; }, methods: { refreshData() { // 保存当前展开的节点 keys const expandedKeys = this.$refs.tree.getExpandedKeys(); // 模拟刷新数据，例如从 API 获取新数据 this.treeData = [ { id: 1, label: '更新后的节点1', children: [{ id: 2, label: '更新的节点1-1' }] } ]; // 在下一次 DOM 更新后恢复展开状态 this.$nextTick(() => { this.$refs.tree.setExpandedKeys(expandedKeys); }); } } }; </script> ``` - 解释：`this.$nextTick` 确保在 DOM 更新后执行，因为数据更新后树需要时间重新渲染。 - 相关于引用：引用中讨论了局部刷新，但对于非懒加载树，保存和恢复展开状态是更直接的方法。用户提到“data刷新”，可能涉及整个数据源更新。 相关问题： 1. 如何实现 el-tree 节点的懒加载刷新？ 2. el-tree 如何获取和设置节点的展开或选中状态？ 3. 在 Vue 中如何高效处理大型数据集以避免性能问题？ </think> ### 在 el-tree 中刷新数据后保持已展开节点不变的方法 在使用 Element UI 的 `el-tree` 组件时，如果直接刷新整个树的数据源（如更新 `data` 属性），树会完全重新渲染，导致当前展开的节点状态丢失。为解决此问题，核心思路是避免全量刷新，转而通过 **保存和恢复展开状态** 或 **局部刷新节点** 来实现。以下是具体方法： #### 方法 1: 保存和恢复展开状态（推荐） 适用于非懒加载树（静态数据），通过编程方式记录当前展开的节点 keys，待数据刷新后重新应用这些状态： 1. **保存展开状态**：在刷新 `data` 前，使用 `getExpandedKeys()` 方法获取已展开节点的 key 集合。 2. **刷新数据**：更新 `data` 属性（如从后端接口获取新数据）。 3. **恢复展开状态**：在数据更新后，通过 `setExpandedKeys()` 方法还原展开状态。 ```vue <template> <el-tree :data="treeData" ref="tree" node-key="id"></el-tree> <button @click="refreshTree">刷新数据</button> </template> <script> export default { data() { return { treeData: [] // 初始树数据 }; }, methods: { async refreshTree() { // 1. 保存当前展开的节点 keys const expandedKeys = this.$refs.tree.getExpandedKeys(); // 2. 刷新数据（示例：模拟 API 请求） const newData = await this.fetchNewData(); // 从后端获取新数据 this.treeData = newData; // 3. 恢复展开状态 (使用 nextTick 确保 DOM 更新完成) this.$nextTick(() => { this.$refs.tree.setExpandedKeys(expandedKeys); }); }, fetchNewData() { // 模拟后端接口请求，返回新树数据 return new Promise(resolve => { setTimeout(() => { resolve([ { id: 1, label: "根节点", children: [{ id: 2, label: "子节点" }] } ]); }, 500); }); } } }; </script> ``` **关键点**： - `node-key` 属性必须指定（如 `id`），用于标识节点唯一性。 - `nextTick` 确保在 Vue 更新 DOM 后恢复状态，避免时序问题。 - 此方法无需后端配合，完全由前端控制[^1]。 #### 方法 2: 局部刷新节点（适用于懒加载树） 如果 `el-tree` 使用懒加载（`:load="loadNode"`），可通过刷新单个节点避免全树重置： 1. **定位目标节点**：在操作（新增/编辑/删除）时记录当前节点。 2. **标记节点需刷新**：设置 `node.loaded = false` 强制该节点下次展开时重新加载。 3. **触发重新加载**：调用 `node.expand()` 模拟展开操作。 ```vue <template> <el-tree :data="treeData" :load="loadNode" ref="tree" lazy @node-click="handleNodeClick" ></el-tree> </template> <script> export default { methods: { handleNodeClick(data, node) { this.currentNode = node; // 记录当前节点 }, async deleteNode() { await this.deleteNodeFromBackend(); // 发送删除请求到后端 // 局部刷新当前节点 this.currentNode.loaded = false; // 标记节点需重新加载 this.currentNode.expand(); // 触发重新加载数据[^2][^3] } } }; </script> ``` #### 注意事项 1. **懒加载兼容性**：方法 2 仅适用于懒加载树，方法 1 通用性更强。 2. **性能优化**：大型树建议优先使用局部刷新，减少不必要的渲染。 3. **数据一致性**：确保后端返回的数据结构与前端一致（如 `id` 不变），否则状态恢复可能失败。 通过上述方法，可实现在 `el-tree` 数据刷新后保持用户展开状态不变，提升交互体验[^1][^2][^3]。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Math.random( ) ;

如果你刚好喜欢，则可以给我点动

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值