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

约定不等于承诺〃 2022-03-26 13:06 1011阅读 0赞

废话不多说，直接上需求，如下图所示，当页面加载完成后，要默认选中，第一个节点，以及第一个节点对应的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70]  
思路：在加载完左侧分类树之后，给第一个节点改变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”);得到的!\[在这里插入图片描述\]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 1]

firstSelectedNode 的html代码  
![在这里插入图片描述][20190117115553261.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70]: /images/20220326/b1b4c1e9231245f5a27508da2fede883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHh4eA_size_16_color_FFFFFF_t_70 1]: /images/20220326/9548a089a2f34faea04431eb8bd7d448.png
[20190117115553261.png]: /images/20220326/18daea8c30e547beaef8a5b355974da1.png