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

最新推荐文章于 2025-03-18 09:21:02 发布

java_xxxx

最新推荐文章于 2025-03-18 09:21:02 发布

阅读量8.7k

点赞数

分类专栏： # ElementUI 文章标签： el-tree默认选中节点样式

本文链接：https://blog.csdn.net/java_xxxx/article/details/88552503

版权

ElementUI 专栏收录该内容

15 篇文章

订阅专栏

1、添加默认样式

法1

适用于element2.0.11

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

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

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

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

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

法二

以上方法在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会将点击的节点添加高亮显示，结果两个节点都是被选中的样式，如下图所示
在这里插入图片描述
所以我们要在节点点击的时候，将默认节点的样式给去除

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

在这里插入图片描述

注释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, "");