element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮

前言

• tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系

• 实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验

• 在用户选择之后，通过本地存储的方式把楼层id存起来，刷新之后获取楼层id，调用数据

• 或者为了用体验我们需要在选中同时高亮，在状态保持之后，把绑定楼层id节点高亮提示用户

• 万变不离其宗，基于文档介绍和HTML结构代码。我们可以通过2种办法实现

第一种-利用默认点击选中会增加类名

• 当我们打开浏览器检查会发现，当树节点点击之后。会在该节点添加一个类名

• 当我们配置好树形结构唯一值，默认选中数组，ref之后我们可以通过在获取楼层数据之后赋值，再通过侦听器来侦听，当察觉默认数组复制之后，就通过document找到这个类名，点击它，就会默认选中第一个

• 注意：使用this.$nextTick（）避免出现层级问题

• 缺点：不管传入什么值-只会选中第一个。应为是点击还会触发树结构自带的收缩

案例代码如下-可直接复制

第二种方法-通过高亮属性+tree提供api-推荐

• 当我们配置好树结构唯一值，高亮当前节点属性，ref之后，

• 我们在获取属性结构数据地方取第一个数据id，传入api，就可以高连当前节点

• 注意：使用this.$nextTick（）避免出现层级问题

• 优点：只需要树形结构唯一值id传入api就可以实现选中树形结构任意节点并且高亮-符合实际开发

案例代码如下-可直接复制

---

总结：

经过这一趟流程下来相信你也对 element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕