我自己写了一个 tree-offline的css样式哈这个不算。
找到tree-icon的子元素然后改掉class就可以。
如下所示：
var icons = $(node.target).find("span.tree-icon")
if (icons) {
if (online) {
$(icons[0]).addClass("tree-file")
$(icons[0]).removeClass("tree-offline")
}
else {
$(icons[0]).addClass("tree-offline")
$(icons[0]).removeClass("tree-file")
}
}
如图，需求是将el-tree改成如下样式：
我们可以自由控制el-tree里面文字的样式，但是由于CSS暂时不支持通过子元素去查找父元素，所以无法通过自己设置样式去修改。
可以观察到，在开启了 highlight-current 时，el-tree的选中项，均有一个 is-current 的类名，所以我们可以通过给 is-current 下面的 el-tree-node__content 添加一个伪类，就可以实现左边的蓝色小条条。
这样可以实现在每次点击时，左边都会有个小条条的需求。
但是还有一个问题，就是在树形图默认展开的时候，该项并没有 is-current 类名，这样在首次加载数据时，默认展开项不会出现蓝色小条条。
我们可以在默认展开的时候，手动给第一项加一个 is-current 类名。最好写到nextTick里面。
但是这样还有一个问题，就是在点击别的项的时候，默认展开项的蓝色条条并没有消失。所以我们还要在点击事件中，把这个类名给删掉，删掉后，如果点击的事默认展开项，组件会再自动加上这个类名，所以不用担心~
目前num的值还没有赋值。你一开始设置的是类选择器，js取值的时候是取的id的tree1的。你把.div {display:none}先改成#tree1,#tree2,#tree3,#tree4,#tree5{display:none}看看
