elementui树形组件el-tree回显的时候默认高亮已选择的节点,并且定位到当前高亮的节点位置

需求：默认进来是中选高亮，并且定位当高亮的位置

image.png

1.后台返回的数据，这根线上的所有的数据，一条线上的全部返回，但是其他的需要点击的时候调用另外一个接口
2.点击当前的节点调用接口把返回来的数据给当前点击节点的children就好了，然后紧接着把高亮节点
3.高亮节点必须 node-key="orgCode" 和 this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //设置选中，配置highlight-current后，即可高亮
4.计算当前高亮的位置
html

           

                
                
            
            

                取消
                确定
            
        

data里面的参数

/*修改部门*/
dialogVisibleDept:false,
orgListLine:[], //后台返回这条线选中的所有数据
curNodeCheck:"" ,//临时存储点击当前节点（最后保存用）

methods里面方法

 //添加层级图标
            renderContentCont(h, { data }) {
                let createElement = arguments[0];
                if (data.deptType == 1) {
                    return createElement("span", [
                        createElement("i", {
                            attrs: { class: "iconfont icon-jigouyinhang" },
                        }),
                        createElement("span", "     "),
                        createElement("span", arguments[1].node.label),
                    ]);
                } else if (data.deptType == 2) {
                    return createElement("span", [
                        createElement("i", { attrs: { class: "iconfont icon-bumen" } }),
                        createElement("span", "     "),
                        createElement("span", arguments[1].node.label),
                    ]);
                } else {
                    return createElement("span", [
                        createElement("i", { attrs: { class: "iconfont icon-renyuan1" } }),
                        createElement("span", "     "),
                        createElement("span", arguments[1].node.label),
                    ]);
                }
            },
//tree change事件
            handleCheckChange(obj) {
                this.curNodeCheck=obj //当前点击的节点数据
                let params = {
                        //点击传参数
                        deptType: obj.deptType,
                        orgCode: obj.orgCode,
                        orgType: obj.orgType,
                }
                contentMngAddEditApi.organizationsTree(params).then((res) => {
                    if (res.status == 0) {
                        obj.subDeptList=res.data//把点击出来的数据给当前的节点
                    } else {
                        return this.$message.error(res.message);
                    }
                });
            },
 //编辑---修改部门
            deptEdit(){
                this.dialogVisibleDept=true
                this.$nextTick(function () {
                    this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //设置选中，配置highlight-current后，即可高亮
                    this.scrollToDepTree(this.dialogForm.deptCode) //计算距离
                })
            },
            //点击保存---存储点击选中的部门
            submitFormDept(){
                this.dialogForm.deptCode=this.curNodeCheck.orgCode;
                this.dialogForm.deptName=this.curNodeCheck.orgName;
                if(this.currentFlag=='deptEditDialog') this.edit()
                this.dialogVisibleDept=false
            },
            //计算此节点的距离思路1.计算出当前节点据顶部的高度+当前节点在树的位置的高度-盒子高度的一半
            scrollToDepTree(deptCode){
                 let currentNode = this.$refs.deptTree.getNode(deptCode)
                let parentLevel
                let nodeCount = 1//当前树展开节点的数量
                let nodeIndex = 1//当前选中节点在当前树的位置
                let dataIndex; //后台返回当前选中节点的父节点是当前的第几位
                for ( let i=0; i0)//包含一级节点，因为一级节点有多个，如果是一级节点有一个，那这个判断就是while ( 1!=parentLevel)
                    let dom = document.querySelector("#divTree")
                    let dom1 = document.querySelector("#depTree")
                    //一个节点的高度是26px,这个值能否从对象中获取，等我把这个功能做好再考虑吧
                    let nodeHight =26
                    // console.log('nodeCount',nodeCount);
                    // console.log('nodeHight',nodeHight);
                    // console.log('nodeIndex',nodeIndex);
                    // console.log('scrollHeight',dom1.scrollHeight);
                    dom1.style.height = (nodeCount * nodeHight) + "px"
                    let contHeight=(nodeIndex * nodeHight)+topHeight-300//总高度,盒子高度的一半
                    dom.scrollTo(0, contHeight)
                }
            },