el-tree树的默认节点样式，以及默认样式的取消

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()的回调函数中。