el-tree的默认选择节点的样式

废话不多说，直接上需求，如下图所示，当页面加载完成后，要默认选中，第一个节点，以及第一个节点对应的数据。

思路：在加载完左侧分类树之后，给第一个节点改变class样式，并获得第一个节点的id，请求节点数据，显示在左侧。

html部分代码--------------------------------------------------------

 <el-tree
                        id="column-tree"
                        ref="catalogTree"
                        :data="catalogTableData"
                         :props="defaultProps"
                         highlight-current="true"
                         @node-click="handleNodeClick">
                </el-tree>

js添加默认样式代码：---------------------------------------------------

 //加载当前站点的所有图片分类
        loadCatalogs: function () {
            var teExpandField = Util.jsonParse(userUtil.getSite().teExpandField);
            if (teExpandField && teExpandField.hgphotoApi && teExpandField.hgphotoApi.length > 0) {
                this.btnStatus = true;
            }
            var url = this.api.getCatalogList;
            Util.httpGet(url, function (result) {
                if (result.success) {
                    app.catalogTableData = result.data;
                    console.log("tree======================")
                    console.log(app.catalogTableData);
                    // 判断是否为空
                    if(result.data && result.data.children.length >0 ){
                        app.currentNode = result.data.children[0].data;
                        //默认选中第一个节点
                        app.$nextTick(function () {
                        // 得到这颗树的html：html 代码结构见文章末尾附录
                            var columnTree = document.getElementById("column-tree");
                            console.log(columnTree);
                            // 这里只是自定义一个对象，用来接受这颗树的第一个节点（这个是这颗树的html代码，所以里面有class样式，我们就可以为所欲为了）
                            app.firstSelectedNode = columnTree.childNodes[0];
                            // 添加样式，is前有个空格，一定不要忘记。is-current是elementUI设定的选中时的样式
                            app.firstSelectedNode.className += " is-current";
                            app.defaultNode = result.data.children[0].data;
                            // 请求右侧数据，这代码也要写在 app.$nextTick这个方法内，应为是ajax请求，若
                            // 异步请求。写在该方法外，将会导致 app.$nextTick还没执行完，就执行了handleNodeClick这个方法，但是在handleNodeClick方法内，defaultNode为undifine，所以样式就会出问题，就没有默认样式； 
                            app.handleNodeClick(result.data.children[0]);
                        });
                    }
                }
                else {
                    app.$message(result.message);
                }
            });
        },

js取消默认样式代码---------------------------------------

 /** 左侧图片类型点击事件*/
        handleNodeClick:function (node) {

            app.currentNode = node.data;
            app.modifyCatalogName = app.currentNode.catalogName;

            // 强制取消默认节点的背景色
            // 这里用defaultNode的catalogId 如果与app.currentNode.catalogId不同，则为点击了非默认节点的样式
            // 此时要将默认节点的样式修改掉，否则，默认样式的那个节点一直有样式，你若是点一个节点，那就有2个节点都是被选中的样式了
            if (app.firstSelectedNode && app.defaultNode.catalogId != app.currentNode.catalogId) {
            // 仍然在该函数内，清空样式
                app.$nextTick(function () {
                    app.firstSelectedNode.className = app.firstSelectedNode.className.replace(" is-current", "");
                    app.firstSelectedNode = null;
                });
            }

            // 查询参数
            var query = JSON.parse(JSON.stringify(this.queryParam));
            query.catalogId = node.id;
            if (this.queryParam.beginDate != '' & this.queryParam.beginDate != null) {
                query.beginDate = Util.formatDateObj(this.queryParam.beginDate).substr(0, 10);
            }
            if (this.queryParam.endDate != '' & this.queryParam.endDate != null) {
                query.endDate = Util.formatDateObj(this.queryParam.endDate).substr(0, 10);
                query.endDate += " 23:59:59";
            }

            var url = this.api.getPicGroupList;
            Util.httpGet(url, query, function (result) {
                if (result.success) {
                    for (var i in result.data.rows) {
                        result.data.rows[i].createTime = result.data.rows[i].createTime.substr(5, 11);
                    }
                    app.picRows = result.data.rows;
                    app.pagination.total = result.data.total;
                }
                else {
                    app.$message(result.message);
                }
            });
        },

树的html代码 ： 通过document.getElementById(“column-tree”);得到的![在这里插入图片描述]

firstSelectedNode 的html代码