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为设置第一次的节点，不符合常理。

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

四 遗留问题

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