如何修改el-tree默认选中项的样式

如图，需求是将el-tree改成如下样式：

我们可以自由控制el-tree里面文字的样式，但是由于CSS暂时不支持通过子元素去查找父元素，所以无法通过自己设置样式去修改。

可以观察到，在开启了 highlight-current 时，el-tree的选中项，均有一个 is-current 的类名，所以我们可以通过给 is-current 下面的 el-tree-node__content 添加一个伪类，就可以实现左边的蓝色小条条。

这样可以实现在每次点击时，左边都会有个小条条的需求。

但是还有一个问题，就是在树形图默认展开的时候，该项并没有 is-current 类名，这样在首次加载数据时，默认展开项不会出现蓝色小条条。

我们可以在默认展开的时候，手动给第一项加一个 is-current 类名。最好写到nextTick里面。

但是这样还有一个问题，就是在点击别的项的时候，默认展开项的蓝色条条并没有消失。所以我们还要在点击事件中，把这个类名给删掉，删掉后，如果点击的事默认展开项，组件会再自动加上这个类名，所以不用担心~

先使用find函数根据id找到节点，再用select函数显示。如：

var node = $('#tt').tree('find', 12)

$('#tt').tree('select', node.target)

PF中的 TreeView 控件 也是属于“条目控件”一类，拥有Items属性。每个TreeViewItem 都有一个 IsSelected属性，用于来设置是否被选中。 当然，选中之前 要先根据node的名称找到TreeViewItem，通过 TreeView 的ItemContainerGenerator.ContainerFromIndex 方法 找到item，再设置 IsSelected即可。

---