需求：默认进来是中选高亮，并且定位当高亮的位置
image.png
1.后台返回的数据，这根线上的所有的数据，一条线上的全部返回，但是其他的需要点击的时候调用另外一个接口
2.点击当前的节点调用接口把返回来的数据给当前点击节点的children就好了，然后紧接着把高亮节点
3.高亮节点必须 node-key="orgCode" 和 this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //设置选中，配置highlight-current后，即可高亮
4.计算当前高亮的位置
html
<el-dialog :close-on-click-modal="false" title="修改部门" :visible.sync="dialogVisibleDept" width="700px" @close="closeDialogDept">
<div id="divTree" style="height:500px; overflow-y: auto">
<el-tree
id="depTree"
accordion
highlight-current
@node-click="handleCheckChange"
:render-content="renderContentCont"
:props="props"
:data="orgListLine"
default-expand-all
node-key="orgCode"
ref="deptTree"
>
</el-tree>
</div>
<div class="dialog_button">
<el-button @click="closeDialogDept">取消</el-button>
<el-button type="primary" @click="submitFormDept">确定</el-button>
</div>
</el-dialog>
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; i<this.orgListLine.length; i++){
if(this.orgListLine[i].subDeptList !=null){//有子集节点的
if(this.orgListLine[i].orgCode==this.orgListLine[i].orgCode){ //this.orgListLine[i].orgCode默认选中的父节点的orgCode（一个），另外一个this.orgListLine[i].orgCode是一级节点所有的orgCode(多个)
dataIndex =i
}
}
if(this.orgListLine[i].orgCode==deptCode){ //只有一级节点的
dataIndex =i
}
}
let topHeight=dataIndex*26;//计算出选中节点到到顶部的高度
if(currentNode){
let currentNodeOrgCode= currentNode&¤tNode.data.orgCode;
//计算nodeCount和nodeIndex
console.log('是否有值',currentNode);
do {
currentNode = currentNode.parent
parentLevel = currentNode.level
let childNodes = currentNode.childNodes
nodeCount += childNodes.length
for (let i = 0; i < childNodes.length; i ++) {
if (childNodes[i].data.orgCode == currentNodeOrgCode) {
nodeIndex += (i + 1)
}
}
currentNodeOrgCode = currentNode.data.orgCode
}
while ( parentLevel>0)//包含一级节点，因为一级节点有多个，如果是一级节点有一个，那这个判断就是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)
}
},
