el-tree的局部刷新(懒加载)

1、前言：
当树结构为懒加载(lazy)时，在进行新增、删除、修改等操作后就需要局部刷新树结构。

2、思路：
让当前选中的树节点(若为删除操作，则为父级节点)，重新执行一次获取子节点的方法。

3、关键代码：

<el-treeref="tree"node-key="id"lazy:load="loadNode":props="defaultProps"@node-click="handleNodeClick"
/>

js代码：

 data() { return {...currentNode: null,... }}, methods: {// 点击节点时，保存当前节点 handleNodeClick(data, node) { this.currentNode = node } // 局部刷新方法partialRefresh() {const node = this. currentNode// 新增或修改时,更新当前节点node.loaded = falsenode.loadData() // 重新查询当前节点的所有子元素// 删除时, 更新父级节点node.parent.loaded = falsenode.parent.loadData()}// 在保存的时候调用局部刷新方法confirm(){...this.partialRefresh()... }}

el-tree的局部刷新(懒加载)相关推荐

el-tree 懒加载的实现以及局部刷新
整个树结构如下,使用懒加载实现,第一个按钮可以折叠收缩,第二个按钮刷新,第三个按钮新增第一级节点新增第一级节点的弹窗右侧悬浮显示操作按钮在第一级右侧点击按钮新增第二级节点的弹窗 html代码 & ...
vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）
场景如上图所示,左边展示分组及分组下的标签,点击某个标签,在右边展示某个标签的详情,可以对标签内容进行编辑保存,还可对标签进行搜索,默认展示全部标签,展开一级不目下标签,若对标签进行搜索筛选,则把每 ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
el-table懒加载刷新
el-table 懒加载刷新问题问题列表查询是用element-ui的table组件实现的,数据之间有层级显示,默认只查询显示一级数据,子级数据需要通过load懒加载来查询.由此引发的问题,比如用 ...
matlab uitree update,elementUI tree 懒加载更新节点
最近在项目中用到了 elementUI 的懒加载 tree 组件,因为项目里有新增.修改.删除节点的功能,使用了以后发现不能主动更新 tree 的数据,查阅资料,发现找不到解决的方案,最后尝试了 N ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
移动端懒加载、下拉刷新、上拉加载
优势:提升性能实现原理:图片是通过img的src属性,当对src赋值时,浏览器就会请求图片资源. 基于这个问题,我们可以利用标签的自定义属性(data-xxx),来保存图片的路径,当我们需要加载图片 ...
element tree ui 全选_element-ui Tree之懒加载叶子节点设置半选效果
本来是不太想动的... 无可奈何,看到一句话[业精于勤, 荒于嬉]便还是动手写一写加深理解的同时给以后的自己留个备份吧... element-ui Tree组件如何给具有懒加载的tree设置半选效果? ...
flutter实战4：新闻列表的懒加载和下拉手势刷新
上一篇我们实现了新闻列表,但在网络不好的时候列表会白屏,因此为了提高使用体验,往列表中加入懒加载效果.其次,引入一个Flutter内置的手势控件,用于支持下拉刷新列表的效果如下图: Flutter将异 ...

el-tree的局部刷新(懒加载)

el-tree的局部刷新(懒加载)相关推荐

最新文章

热门文章