el-tree 局部刷新

已于 2022-07-01 15:45:15 修改
阅读量642 收藏 3
点赞数
文章标签： vue.js
于 2022-06-23 11:33:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzzzzz/article/details/125423784
版权

先保存当前节点：

this.node = node;

新增，更新当前节点：

this.node.loaded = false;
this.node.expand();

修改和删除，更新父级节点：

this.node.parent.loaded = false;
this.node.parent.expand();
zhengzzzzz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree树节点新增、编辑、删除后局部刷新树
weixin_44160439的博客
11-02 7175
场景：左侧为树，右侧为树的增删改配置，右侧增删改操作之后想要实现左侧树节点的局部刷新，保证用户的体验效果。(u‿ฺu✿ฺ)
基于Element中的el-tree组件使用懒加载时更新节点数据
qq_57260058的博客
11-04 1172
基于Element中的el-tree组件使用懒加载时更新节点数据
【vue】el-tree的新增/编辑/删除节点
最新发布
qq_39404437的博客
04-17 2768
关于树形结构的新增同级节点等四种操作，各种参数配置完全继承el-tree，本篇使用vue2 + element-ui。
el-tree 数据改变后局部刷新目录树
Run_youngman的博客
07-03 4191
项目使用过程中，用户展开目录树，然后对目录树实施一些增删改查操作，此时如果选择重新获取最新的目录树，整个目录树就会重新刷新，无法记住之前展开的节点信息，十分影响用户体验，本文旨在通过一定技巧，在不刷新整棵目录树的前提下，实现对目录树节点的增删改等操作。
关于el-tree节点的增删改
半朵梨花压海棠
11-27 691
关于el-tree节点的增删改
el-tree后续需求之解决（更新节点数据、默认选中节点）
Bonjourjw的博客
11-30 1万+
一 背景        el-tree的数据来源，通过后台获取，之前考虑由于刷新数据造成页面闪动的问题，处理方法为不实时刷新el-tree的数据（只考虑到了添加）。         添加一个treeNode时，成功后，调用后台的getTree重新获取最新数据newData，遍历找到新增的目标对象，将其获取作为当前选中节点的子Node。这样没有刷新整棵树，保证页面不会晃动。 二 引发问题：...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree-selected-tree
11-15
在Element UI库中，`el-tree` 是一个强大的组件，用于构建可交互的树形结构数据展示。在实际开发中，我们经常需要处理用户选择的节点，并可能需要独立展示这些选中节点，甚至允许用户在独立的树结构中进行删除操作。...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
总结，要确保Element-ui的`el-tree`组件在新增或删除节点后正确刷新，关键是正确地修改数据源，并根据情况更新受影响的节点状态。同时，确保使用的是支持这一功能的最新Element-ui版本。在实际开发中，遇到问题时，...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-tree新增、编辑、删除节点后如何做到局部刷新el-tree
温柔咩咩的博客
01-13 6890
前提需要： 其中新增与编辑，因为不是懒加载的tree树，小编与后端协调后决定，新增与编辑成功后，接口会返回当前新增或编辑的数据，及其子节点， 如： 这是在新增后，后端返回接口的接口，在产品下新增产品经理。 如果是在编辑有子节点的数据时，就会返回与图相同的数据。 如果编辑没有子级节点的数据，就会返回： 问题还原图： 问题描述： 在新增、编辑、删除时，只刷新当前修改的节点，不刷新整个tree树。 新增与编辑都需要借助后端同事的帮助，而删除则是前端逻辑实现。 但...
基于Element中的el-tree组件的懒加载和更新节点数据
程先生的博客
04-02 1万+
树结构懒加载；lazy
【elementUI Tree 树形控件 动态加载数据、懒加载&&动态操作后局部刷新树结构】
m0_55546349的博客
06-16 6915
【elementUI Tree 树形控件 动态加载数据、懒加载&&动态操作后局部刷新树结构】
Element中的el-tree组件的懒加载和手动更新节点数据
u012930360的博客
08-05 4657
Element中的el-tree组件更新节点数据
vue+element-ui el-tree 组件 的动态加载、新增、更新节点
热门推荐
大脸猫QAQ的博客
03-12 5万+
vue+element-ui el-tree 组件 的动态加载、新增、更新节点 最近在根据需求，需要用到树形控件，ele 的封装了树形控件正好拿来用，用的途中遇到一些问题就总结下，哈哈哈 说正事，我需要动态的加载出整个树形结构，刚好就有 符合需求，啦啦啦 用的时候出现问题了，我要如何把后台返回个我的数据加载到表里呢，上菜。。。 <template> <el-tree ...
vue项目el-tree 懒加载实现增加、修改、删除及刷新当前子节点，render-content自定义样式
m0_38105640的博客
10-15 1万+
element-ui 中设计层级和动态加载节点的组件el-tree，对于前端来说，用的比较多，否则对于vue项目，要自己写render操作dom。当操作的树形结构层级比较多时，多用懒加载。例如实现如下功能，就是用el-tree实现的。 实现这个功能有几个问题 要解决： 1.改样式。官网提供的样式不能够满足开发的需要，尤其是对tree进行增删改的时候。所以需要用到render-content自定义样式。 2.加载问题。懒加载，如何插入数据。 3.增删改之后刷新问题。 前两个问题很好解决，最后一个
vue中el-tree增加节点后重新刷新
xy405580364的博客
10-31 2万+
1.树形组件 <el-tree v-if="openPanel" //重加载 :data="data" //树形数据 :props="defaultProps" node-key="id" //默认展开节点 :default-expanded-keys="[-1]" //默认展开节点：-1 @node-click="handleNodeClick">...
组件 el-tree 刷新
07-15
### 回答1： 组件 el-tree 的刷新操作可以通过重新加载数据来实现。要刷新 el-tree，我们可以通过修改数据源来更新树的显示。 具体的刷新步骤如下： 1. 首先，确保已经正确引入了 el-tree 组件，并在 Vue 实例中注册了 el-tree。 2. 在 Vue 实例的 data 中定义一个数组，用于存放 el-tree 的数据源，例如 treeData。 3. 在页面中使用 el-tree 组件，并将 treeData 绑定到 el-tree 的 data 属性上，可以通过 v-bind 或简写方式来实现。 4. 当需要刷新 el-tree 时，可以通过调用一个方法来修改 treeData 数组，更新数据源。 5. 在该方法中，可以使用合适的方式获取新的数据，并将新的数据赋值给 treeData 数组，例如使用 axios 发送请求获取新数据。 6. 当 treeData 数组发生变化时，el-tree 会自动更新其显示，实现刷新效果。 例如，假设要在 el-tree 中刷新数据，可以使用如下代码： ``` <template> <el-tree :data="treeData"></el-tree> <el-button @click="refreshTree">刷新</el-button> </template> <script> import axios from 'axios'; export default { data() { return { treeData: [] // el-tree 的数据源 } }, methods: { refreshTree() { axios.get('/api/treeData') // 从后端请求新的数据 .then(response => { this.treeData = response.data; // 将新的数据赋值给 treeData 数组 }) .catch(error => { console.log(error); }); } }, mounted() { this.refreshTree(); // 初始化时刷新 el-tree } } </script> ``` 通过调用 refreshTree 方法，可以重新获取新的数据，并将其赋值给 treeData 数组，从而刷新 el-tree 的显示。 ### 回答2： 组件 el-tree 刷新，可以通过改变数据源来实现。el-tree是基于树形结构的组件，它通过props来接收数据源。当数据源改变时，el-tree会自动重新渲染，并实现刷新效果。 在Vue中，可以使用响应式数据来实现数据源的改变。当需要刷新el-tree时，可以通过改变组件绑定的数据的值来触发组件的重新渲染。 首先，在组件的data中定义一个树形结构的数据源treeData，作为el-tree的数据源。假设初始化时treeData的值为[{label:'节点1'}]。 然后，在需要触发刷新的地方，可以通过methods或计算属性来改变treeData的值。例如，可以在methods中定义一个refreshTree的方法，当点击刷新按钮时调用该方法。refreshTree方法可以通过改变treeData的值来实现刷新效果。 例如，在refreshTree方法中，可以将treeData的值重新赋为[{label:'节点1'},{label:'节点2'}]。这样，当调用refreshTree方法时，el-tree组件会重新渲染，并显示新的节点。 最后，在组件的模板中，绑定treeData到el-tree的数据源上。使用v-bind指令将treeData的值作为数据传递给el-tree组件。 <el-tree :data="treeData"></el-tree> 这样，当调用refreshTree方法时，el-tree组件会重新渲染，并显示新的节点，完成了刷新效果。 ### 回答3： 组件 el-tree 提供了两种刷新方式：通过父子组件通信刷新和调用方法刷新。 1. 通过父子组件通信刷新： 在父组件中，可以通过 v-if 或者 :key 的方式对 el-tree 组件进行刷新。当需要刷新时，可以修改 v-if 或者 :key 的值，强制重新渲染 el-tree 组件，从而实现刷新效果。 2. 调用方法刷新： el-tree 提供了 refresh 方法可以手动触发刷新。具体使用方式如下： import { ref } from 'vue'; // 在父组件中，先创建一个 ref 引用 const treeRef = ref(null); // 在 el-tree 组件上绑定 ref 引用 <el-tree ref="treeRef"></el-tree> // 在需要刷新的时候，调用 refresh 方法刷新 treeRef.value.refresh(); 通过这种方式，可以在父组件中通过 ref 引用调用 el-tree 组件的方法刷新视图。 需要注意的是，刷新 el-tree 组件时，要先确保数据源已经更新。可以通过修改数据源，再进行刷新操作，保证视图与最新的数据保持一致。 总之，组件 el-tree 提供了两种刷新方式，可以根据具体场景选择使用哪种方式进行刷新操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值