el-tree后续需求之解决(更新节点数据、默认选中节点)

一 背景

       el-tree的数据来源,通过后台获取,之前考虑由于刷新数据造成页面闪动的问题,处理方法为不实时刷新el-tree的数据(只考虑到了添加)。

        添加一个treeNode时,成功后,调用后台的getTree重新获取最新数据newData,遍历找到新增的目标对象,将其获取作为当前选中节点的子Node。这样没有刷新整棵树,保证页面不会晃动。

二 引发问题:          

这样的处理方法,并没有考虑到修改树节点名称的情况,这就出现了bug,提示节点名称修改成功后,tree上该节点名称一动不动,如初。而且只要不切换页面,el-tree组件上的值永远都是原值。

解决方法:

(1)可能一下又想到上面的方法,仍旧遍历tree找到目标节点,然后再将改动的内容一一对比,将该目标节点的属性更新即可。不过,这样避免不了两次遍历,实现步骤:

       a.首先要拿到更新成功时该节点的属性;(如果直接从更新表单拿到的表单数据并不是标准的节点格式,并不好比对;所以只能通过调用后台接口获取到新的tree数据

       b.第一次遍历:遍历资源树,找到原目标节点;(注意:这里如果修改了nodeName,要更麻烦一点,就需要节点ID定位了

       c.第二次遍历:将目标节点属性与更新后的节点比对,并修改;

可以看出尤其极其麻烦。。。。

(2)于是,这种情况下,何必直接调用更新整个el-tree,重新渲染。于是,尝试后,果然好用,而且并没有出现闪顿现象。这里使用了全局的事件总线方法。如下图,更改触发的组件为组件二,且和资源树所在组件无直接关系。另外,在资源树上选中节点时,通过路由push显示右边的界面。所以即无父子关系也无兄弟关系,故采用了全局事件总线。修改成功后,通知el-tree调用自身更新数据方法,实时显示。相比方法(1),只有第一个步骤,不过是调用el-tree的刷新数据方法。

三 新增默认选中节点展示
       由于每次进入显示el-tree界面时,未选择节点时,右侧为空白,用户体验不良好。于是乎,给el-tree增加一个默认选中功能。查看elment-ui,default-checked-keys可以设置,但这只针对于有check框的tree .......T T,于是一番百度发现。嗯,还是可以实现的。那就是调用原生方法setCurrentKey(),使用此方法必须设置 node-key 属性。

       如上图所示:将el-tree的node-key设置为节点name,实际中不会有同名事件,所以没关系。下面两个getCurrentNode()和getNode()方法主要是为左键点击事件的参数做准备。即默认选中节点时,程序触发左键事件,以显示右侧界面~

这样,问题又来了,上面只解决了第一次进入页面时的默认选中节点,但当用户选中某个节点时,修改成功或者刷新页面时,选择的Node为设置第一次的节点,不符合常理

解决办法:每次左键事件触发的同时,记录当前操作的节点,刷新资源树之前先去读取是否有历史选中状态,以分情况显示默认选中节点即可。

四 遗留问题

由于后续需要定时获取资源树状态,频繁调用接口刷新资源树的情况下,会不会造成页面晃动不稳定?有风险待后续验证。

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值