本文目录一览：

如果再采用自定义节点的方式来修改背景颜色，会出现下图的问题，前面部分无法渲染颜色

1、首先console.log(this.$refs.tree)，不难发现，根本无法通过class来直接区分节点属于哪个级别，但是treeItems的数据是有序的，可以根据index来区分。

2、所以，我们首先要做的第一步是将树形结构的数据转换成list

3、然后，我们可以从下图发现，从这里可以控制style。

4、在挂载页面时，等DOM加载完，遍历list即可

1.鼠标移动到节点上显示功能图标，鼠标移除隐藏

2.点击功能图标显示功能下拉菜单，使用el-dropdown插件

3.不需要设置el-tree属性expand-on-click-node为false，将节点事件和下拉框事件区分开

4.移入到节点DOM上就显示功能图标，而不是移动到文本DOM才显示（这个功能纠结和好久）

1.通过给数据动态加入dropdownShow属性来控制功能按钮的显示和隐藏，不然鼠标移入后，所有节点都会显示功能按钮

2.因为鼠标事件是绑定到span标签（即文本）的，所以要设置高度为100%，不然会出现从一个节点移动到另一个节点时，看到是移上去了但是功能按钮未显示的bug（节点间隔越大，越容易看到）。

3.通过@click.stop="()={}"禁用掉div部分的el-tree点击事件，实现节点事件和下拉菜单事件区分

最近树形结构的东西整的有点多，也遇到一些小问题，关于el-tree过滤节点，官方给出的例子挺不错的，但是结合实际需求又有些出入，所以自己又花了点时间调试

首先讲讲需求：

好吧那就先递归(写的很直白 有需要也可以用es6简化)：

3.这个时候就获取了当前节点以及他子节点的所有id数组，

然后就用过滤方法过滤了，当时也是写了个错误的map遍历，算了 直接给正确答案

然后就完成需求了，不过作者本身也遇到一个问题，就是过滤后，树形结构会默认展开状态，不清楚是不是因为全部过滤 一次的原因，如果有小伙伴知道原因，能改为不展开，评论告诉我一下，谢谢。

1.点击按钮，全部展开，然后el-tree则全部展开

2.点击按钮，全部折叠，然后el-tree则全部折叠

3.使用 :default-expand-all="isExpand"，动态改变isExpand的值，值变化，树却没有变化