• 微信号
  • 微信号
您当前的位置:首页 > 学海无涯 > 茑语花香>el-tree 异步树局部刷新(新增,删除,编辑,上下移动)

el-tree 异步树局部刷新(新增,删除,编辑,上下移动)

孤峰 孤峰家 2023-08-08 34人阅读

目录树数据绑定有两种方式,同步和异步。

同步:一次性返回所有组织树数据,一次绑定;

异步:点击节点,只返回该节点的第一级子节点数据进行绑定,其他节点数据需要点击对应的父节点获取;

同步树和异步树进行更新的方式自然也不同;比如实现如下增删改查上下移动操作

如果是同步树:对目录树进行增删改查操作后,要实现及时刷新效果,需要重新请求一次接口,然后通过设置展开属性 展开到编辑节点即可;

如果是异步树:目录树实现增删改查操作,要及时刷新效果,只能通过触发点击父节点load函数实现;怎么实现及时刷新效果呢;

实现原理:在每次点击父节点,请求数据时,将resolve保存下来;增删改查操作后,通过执行resolve请求,重新请求父节点接口即可;思路如下

定义一个仓库变量,存储所有父节点resolve // 存储所有父节点的对象(为实现实时刷新异步目录树)

parentResolves: {}

// 其他节点getOtherNode (node, resolve) {let params = {indexCode: node.data.indexCode,camera: false}this.parentResolves[node.data.indexCode] = resolve //保存到仓库变量this.asyncRequestTree(params, resolve)}, // 局部刷新异步目录树refreshPartFavGroup (parentIndexCode) {let resolve = this.parentResolves[parentIndexCode]this.asyncRequestTree({indexCode: parentIndexCode,camera: false}, resolve)},

// 删除收藏目录deleteGroup () {if (this.clickedNode) {let _node = this.clickedNodelet params = {indexCode: _node.data.indexCode}deleteFavGroup(params).then(res => {let msgType = res.msg === 'SUCCESS' ? 'success' : 'error'vueUtils.messageDialog(this, msgType, res.msg)msgType === 'success' ? this.refreshPartFavGroup(this.clickedNode.parent.data.indexCode) : (function () {})()this.clickedNode = null})} else {vueUtils.messageDialog(this, 'warning', '必须选择一个目录')}},

这样可以实现局部刷新效果

转载:感谢您阅览,转载请注明文章出处“来源从小爱孤峰知识网:一个分享知识和生活随笔记录的知识小站”。

链接:el-tree 异步树局部刷新(新增,删除,编辑,上下移动)http://www.gufeng7.com/niaolang/1817.html

联系:如果侵犯了你的权益请来信告知我们删除。邮箱:119882116@qq.com

标签: