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

不念不忘少年蓝@ 2022-03-08 05:58 1351阅读 0赞

## 1、添加默认样式 ##

### 法1 ###

适用于element2.0.11

如果想要给el-tree这棵树的第一个节点设置默认样式，我们首先要拿到这颗树，然后取出第一个节点，继而进行操作。  
html代码:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70]  
所以我们js里要通过你定义的那个id来获得dom节点

var columnTree = document.getElementById("column-tree");

js代码：只看红框内的代码即可，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 1]  
我们可以先看看这个兴风作浪的columnTree 的真面目，知己知彼，方能克敌制胜嘛。下图可以看出本质上就是一个dom节点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 2]

Dom节点已经拿到了，我们就可以取出第一个节点了。  
注释写的很清楚了，这里我再啰嗦一下，  
这行代码就是将这棵树的第一个子节点赋值给app.firstSelectedNode我们自定义的一个对象。这就是对象的引用了。就是如果你对app.firstSelectedNode有任何的操作，就相当于直接对columnTree.childNodes\[0\]进行了操作。例如你给这个电视机配了一个遥控器，你这个遥控器做什么动作，电视机就会做出响应的反应。app.firstSelectedNode就是一个遥控器，第一个节点就是电视机。所以我们这里给app.firstSelectedNode的className属性追加 一个class样式 is-current（该样式是elementUI写好的样式，我们拿来用就可了），注意 is-current的前面是有一个空格的。此时前端页面中的树的第一个子节点就会有相应的样式。

js代码:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 3]  
，然后打开第一个节点就是我们渲染后的，大家可以看到，渲染后的节点里有我们添加的“is-current”这个样式，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 4]

### 法二 ###

以上方法在elementUI的2.13.0并不适用  
在请求完栏目树的时候，调用函数

app.$nextTick(function () { 
                                app.$refs.treeDataRef.setCurrentKey(app.catalogData.treeData[0].id);
                            });

loadTree: function () { 
                var url = this.api.selectCatalogByType + '?resType=2';
                Util.httpGet(url, function (result) { 
                    console.log(result);
                    if (result.success) { 
                        if (result.data.children && result.data.children.length > 0) { 
                            app.catalogData.treeData = result.data.children;
                            // 设置默认节点样式
                            app.$nextTick(function () { 
                                app.$refs.treeDataRef.setCurrentKey(app.catalogData.treeData[0].id);
                            });
                        }
                    } else { 
                        app.$error(result.message);
                    }
                });
            },

默认节点赋予后，只要点击其它节点默认节点的样式会自动消失

## 2、去除默认样式 ##

然后默认节点的问题解决了，当我们选中其它节点的时候，要将这个默认节点的样式取消，否则的话，当你点击的时候elementUI会将点击的节点添加高亮显示，结果两个节点都是被选中的样式，如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 5]  
所以我们要在节点点击的时候，将默认节点的样式给去除

html代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 6]  
js代码：在el-tree的点击事件里

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 7]

注释1：代码为啥要写在app.$nextTick(function () \{\} 函数内。因为  
如果你在Vue生命周期的created()/mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()/mounted()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

注释2：以上去掉默认选中节点的样式时采用下面的方法

app.firstSelectedNode.className = app.firstSelectedNode.className.replace(/is-current/g, "");

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70]: /images/20220308/2b76ff7bed8441baae4c8459ff3c9106.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 1]: /images/20220308/096eb75cbf9c4e0aa66bf76fe8941a32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 2]: /images/20220308/160a85c9d2c9401eab88b45f24ec97a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 3]: /images/20220308/372312f05a0d475ab8811a11a9547037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 4]: /images/20220308/159ffca2b2e04e658e85313b3b6f907d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 5]: /images/20220308/591b58788e2b4b7cbb4a9825a141d96a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 6]: /images/20220308/d74a31135603489ebe126ee68b7c8198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 7]: /images/20220308/a156362ee24345bf8962c520665b1270.png