需求：默認(rèn)進(jìn)來是中選高亮悬包，并且定位當(dāng)高亮的位置
image.png
1.后臺(tái)返回的數(shù)據(jù)铭若，這根線上的所有的數(shù)據(jù)枫匾，一條線上的全部返回灰追，但是其他的需要點(diǎn)擊的時(shí)候調(diào)用另外一個(gè)接口
2.點(diǎn)擊當(dāng)前的節(jié)點(diǎn)調(diào)用接口把返回來的數(shù)據(jù)給當(dāng)前點(diǎn)擊節(jié)點(diǎn)的children就好了堵幽，然后緊接著把高亮節(jié)點(diǎn)
3.高亮節(jié)點(diǎn)必須 node-key="orgCode" 和 this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //設(shè)置選中，配置highlight-current后弹澎，即可高亮
4.計(jì)算當(dāng)前高亮的位置
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里面的參數(shù)
/*修改部門*/
dialogVisibleDept:false,
orgListLine:[], //后臺(tái)返回這條線選中的所有數(shù)據(jù)
curNodeCheck:"" ,//臨時(shí)存儲(chǔ)點(diǎn)擊當(dāng)前節(jié)點(diǎn)（最后保存用）
methods里面方法
//添加層級(jí)圖標(biāo)
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 //當(dāng)前點(diǎn)擊的節(jié)點(diǎn)數(shù)據(jù)
let params = {
//點(diǎn)擊傳參數(shù)
deptType: obj.deptType,
orgCode: obj.orgCode,
orgType: obj.orgType,
}
contentMngAddEditApi.organizationsTree(params).then((res) => {
if (res.status == 0) {
obj.subDeptList=res.data//把點(diǎn)擊出來的數(shù)據(jù)給當(dāng)前的節(jié)點(diǎn)
} else {
return this.$message.error(res.message);
}
});
},
//編輯---修改部門
deptEdit(){
this.dialogVisibleDept=true
this.$nextTick(function () {
this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //設(shè)置選中朴下，配置highlight-current后，即可高亮
this.scrollToDepTree(this.dialogForm.deptCode) //計(jì)算距離
})
},
//點(diǎn)擊保存---存儲(chǔ)點(diǎn)擊選中的部門
submitFormDept(){
this.dialogForm.deptCode=this.curNodeCheck.orgCode;
this.dialogForm.deptName=this.curNodeCheck.orgName;
if(this.currentFlag=='deptEditDialog') this.edit()
this.dialogVisibleDept=false
},
//計(jì)算此節(jié)點(diǎn)的距離思路1.計(jì)算出當(dāng)前節(jié)點(diǎn)據(jù)頂部的高度+當(dāng)前節(jié)點(diǎn)在樹的位置的高度-盒子高度的一半
scrollToDepTree(deptCode){
let currentNode = this.$refs.deptTree.getNode(deptCode)
let parentLevel
let nodeCount = 1//當(dāng)前樹展開節(jié)點(diǎn)的數(shù)量
let nodeIndex = 1//當(dāng)前選中節(jié)點(diǎn)在當(dāng)前樹的位置
let dataIndex; //后臺(tái)返回當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)是當(dāng)前的第幾位
for ( let i=0; i<this.orgListLine.length; i++){
if(this.orgListLine[i].subDeptList !=null){//有子集節(jié)點(diǎn)的
if(this.orgListLine[i].orgCode==this.orgListLine[i].orgCode){ //this.orgListLine[i].orgCode默認(rèn)選中的父節(jié)點(diǎn)的orgCode（一個(gè)）苦蒿，另外一個(gè)this.orgListLine[i].orgCode是一級(jí)節(jié)點(diǎn)所有的orgCode(多個(gè))
dataIndex =i
}
}
if(this.orgListLine[i].orgCode==deptCode){ //只有一級(jí)節(jié)點(diǎn)的
dataIndex =i
}
}
let topHeight=dataIndex*26;//計(jì)算出選中節(jié)點(diǎn)到到頂部的高度
if(currentNode){
let currentNodeOrgCode= currentNode&¤tNode.data.orgCode;
//計(jì)算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)//包含一級(jí)節(jié)點(diǎn)殴胧，因?yàn)橐患?jí)節(jié)點(diǎn)有多個(gè)，如果是一級(jí)節(jié)點(diǎn)有一個(gè)佩迟，那這個(gè)判斷就是while ( 1!=parentLevel)
let dom = document.querySelector("#divTree")
let dom1 = document.querySelector("#depTree")
//一個(gè)節(jié)點(diǎn)的高度是26px,這個(gè)值能否從對(duì)象中獲取团滥，等我把這個(gè)功能做好再考慮吧
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)
}
},
