1、添加默认样式
如果想要给el-tree这棵树的第一个节点设置默认样式,我们首先要拿到这颗树,然后取出第一个节点,继而进行操作。
html代码:
所以我们js里要通过你定义的那个id来获得dom节点
var columnTree = document.getElementById("column-tree");
js代码:只看红框内的代码即可,
我们可以先看看这个兴风作浪的columnTree 的真面目,知己知彼,方能克敌制胜嘛。下图可以看出本质上就是一个dom节点
Dom节点已经拿到了,我们就可以取出第一个节点了。
注释写的很清楚了,这里我再啰嗦一下,
这行代码就是将这棵树的第一个子节点赋值给app.firstSelectedNode我们自定义的一个对象。这就是对象的引用了。就是如果你对app.firstSelectedNode有任何的操作,就相当于直接对columnTree.childNodes[0]进行了操作。例如你给这个电视机配了一个遥控器,你这个遥控器做什么动作,电视机就会做出响应的反应。app.firstSelectedNode就是一个遥控器,第一个节点就是电视机。所以我们这里给app.firstSelectedNode的className属性追加 一个class样式 is-current(该样式是elementUI写好的样式,我们拿来用就可了),注意 is-current的前面是有一个空格的。此时前端页面中的树的第一个子节点就会有相应的样式。
js代码:
,然后打开第一个节点就是我们渲染后的,大家可以看到,渲染后的节点里有我们添加的“is-current”这个样式,
2、去除默认样式
然后默认节点的问题解决了,当我们选中其它节点的时候,要将这个默认节点的样式取消,否则的话,当你点击的时候elementUI会将点击的节点添加高亮显示,结果两个节点都是被选中的样式,如下图所示
所以我们要在节点点击的时候,将默认节点的样式给去除
html代码:
js代码:在el-tree的点击事件里
注释1:代码为啥要写在app.$nextTick(function () {} 函数内。因为
如果你在Vue生命周期的created()/mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()/mounted()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。