1.数据存储

整个树的数据是从后端获取的，存在vuex中

构造树时用Map将id和内容存起来，

key: 像这样结构的字符串 (一级名：二级名：三级名：四级名)

value：树节点id

这几级内容也都是存在vuex中的，在树形控件中监听这几级内容的变化，只要有变化，就通过map查到树节点id，实现树节点高亮显示

因为我做的项目需要用到四级树形控件，构造的map看起来可能会复杂些

 

2.高亮显示

//设置高亮显示  
.el-tree--highlight-current /deep/ .el-tree-node.is-checked > .el-tree-node__content {
    background-color: #F3F4F7;
    color: rgb(64, 158, 255);
  }

  .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
    background-color: #F3F4F7;
    color: rgb(0, 158, 255);
  }

element官网提供了这样的方法，参数为节点id

注意：一定要设置node-key属性

 

前面两步完成，已经基本实现了tree树形控件显示高亮的功能

但还有部分小坑

1.刷新页面后发现执行了这个函数，但是页面没有高亮显示

2.如果设置第二或者三四级为当前节点时，节点不会自动展开

 

3.刷新页面后高亮显示

关于执行了设置当前节点函数，但是页面没有高亮的原因，个人猜想是函数是在树形控件渲染完成之前执行的，也就是时机不对，导致没有渲染出来

我们可以使用nextTick来解决这个问题，像下面这样

 

4.节点自动展开

element官网中给出了这样的属性，将该属性绑定数组，把需要展开的节点添加到数组中就OK了

总结：

内容上说的没那么详细，只是给出了一个大致的思路