最近有要求覺得默認全展開或者默認都不展開樹感覺不是很好，所以要求有的樹展示默認展示兩層或者三層，可以動態配置
思路步驟：
1.主要還是要動態設置這個屬性賦值
:default-expanded-keys=“dataIdArr”
2.要想得到對應層的node-key 就要迭代遍歷整個樹。
3，每迭代一次就說明需要展示的層數就多一層，那就說明只要判斷當前的層數是否等於自己設置的層數時就差不多了。
主要代碼內容：
<el-tree :expand-on-click-node="false" :default-expanded-keys="dataIdArr" :data="groupTree" node-key="dataId" ref="groupTreeRef"
highlight-current @node-click="nodeClick" class="leftTree1" :filter-node-method="filterNode">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="[node.disabled?'fontColor':'normalFontColor']">{{ node.label }}</span>
</span>
</el-tree>
//這個方法是觸發展示第幾層 獲取該對象this.developFloor
openFloor(){
if(this.groupTree.length<=0){
return;
}
//每次設置展示層時先清空默認展示的node-key
this.dataIdArr = [];
this.findChild(this.groupTree,1);
//下面這三句是爲了解決先展開多層再展開少層時樹不會收縮問題
let tempTree = JSON.parse(JSON.stringify(this.groupTree));
this.groupTree = [];
this.groupTree = tempTree;
},
//迭代遍歷
findChild(child,degree){
//developFloor 這個是設置要展示第幾層
if(degree == this.developFloor){
this.$nextTick(()=>{
for(var i=0;i<child.length;i++){
this.dataIdArr.push(child[i].dataId);
}
})
}else {
//每迭代一次，迭代次數加自增。
let index = degree+1;
for(var i=0;i<child.length;i++){
if(child[i].children){
this.findChild(child[i].children,index);
}
}
}
},
//數據代碼格式
{
"children": [{
"children": null,
"buttonChildren": null,
"buttonChildrenAll": null,
"buttonChildrenCheck": null,
"info": {
"uuid": "7c1cb8ce-ccbf-497c-88e2-d6e0cec705de"
},
"label": "2",
"dataId": 284,
"idStr": null,
"parentId": 283,
"isChecked": null,
"type": null,
"leftNum": 0,
"specTag": false,
"disabled": null
}],
"buttonChildren": null,
"buttonChildrenAll": null,
"buttonChildrenCheck": null,
"info": {
"uuid": "c5339e82-4cdb-42d5-a623-b6fdc2902001"
},
"label": "1",
"dataId": 283,
"idStr": null,
"parentId": 258,
"isChecked": null,
"type": null,
"leftNum": 0,
"specTag": false,
"disabled": null
}
最後效果圖-根據輸入的層數點展開
------------------------------華麗的分割線------------------------------------
上面部分只基於在前端頁面輸入層數，下面是通過後端數據配置返回的層數來展示默認的樹展開項
/**
* 用於根據傳入的developFloor迭代需要樹展開多少層
* 參考partyAccountGroupManage主賬號組
* child: 傳入的子節點數組
* degree: 迭代的次數
* developFloor: 需要展開第幾層
* dataIdArr: 默認展開的node-key數組
* dataId: 傳進來tree中的node-key綁定的對象,不傳時默認爲dataId
*/
findChild(child,degree,developFloor,dataIdArr,dataId){
var dataId = arguments[4]? arguments[4]:'dataId';
// console.log("findChild",child,degree,developFloor,dataIdArr,dataId);
//每迭代一次，迭代次數加自增。
if(degree === developFloor){
for(var i=0;i<child.length;i++){
dataIdArr.push(child[i][dataId]);
}
}else {
if(child && child.length>0){
let index = degree+1;
for(var i=0;i<child.length;i++){
if(child[i].children){
this.findChild(child[i].children,index,developFloor,dataIdArr,dataId);
}
}
}
}
//後續增加返回結果數據功能
return dataIdArr;
},
/**
*
* @param {樹數據} tree
* @param {展示多層樹} developFloor
* @param {默認展示的節點node-key} dataIdArr
* @param {tree中node-key綁定的對象} dataId
* 使用該方法時，頁面需要定義樹、默認層級、默認顯示的node-key,
* 如果頁面中的node-key不是綁dataId則需要傳對應的node-key字符
*/
getTreeFloor(tree,developFloor,dataIdArr,dataId){
if(tree.length<=0){
return;
}
dataIdArr = [];
if(sessionStorage.getItem('partyAccountGroupTreeTop')){
developFloor = parseInt(JSON.parse(JSON.stringify(sessionStorage.getItem('partyAccountGroupTreeTop'))));
}
// console.log("getTreeFloor",developFloor);
var dataId = arguments[3]? arguments[3]:'dataId';
dataIdArr = this.findChild(tree,1,developFloor,dataIdArr,dataId);
// console.log("getTreeFloor-dataIdArr==",dataIdArr);
/**
* 目前只是從後端數據庫配置默認顯示層數
* 如果需要改成前端動態需改默認層數則需要把這段打開，
* 並可能把這方法寫到vue頁面，參考主賬號組、業務單元
*/
// let tempTree = JSON.parse(JSON.stringify(tree));
// tree = [];
// tree = tempTree;
return dataIdArr;
}
這上面代碼是封裝方法，我這是寫在util工具類文件中。
這下部分的代碼塊是調用後端請求返回樹的數據，工具類方法第二個參數其實可以直接傳0，默認0爲不展開，就是當後端返回的定義層數數據不存在或者說沒配時，展開層數就是爲0層，根節點不展開。this.dataIdArr 爲在data(){}中定義的默認展開數據
this.$fetch.getOrgTreeByKeys(param).then((resp)=>{
if (resp.data.returnCode == "0"){
this.orgTree = [];
this.orgTree.push(resp.data.data.list);
// this.openFloor();
this.dataIdArr = this.$util.getTreeFloor(this.orgTree,this.developFloor,this.dataIdArr);
// console.log("getOrgTreeByKeys--",this.dataIdArr);
}
},(error)=>{
this.$message.error(error.message);
});
這下面是html頁面部分內容。
<el-tree v-model="addnewForm.businessUnit.orgId"
ref="orgTree" node-key="dataId" @node-click="orgAddChange" :default-expanded-keys="dataIdArr"
:data="orgTree" accordion highlight-current :expand-on-click-node="false" :filter-node-method="filterNode">
<span slot-scope="{ node, data }">
<span :class="[node.disabled?'fontColor':'normalFontColor']">{{ node.label }}</span>
</span>
</el-tree>
在頁面最外層,我這邊是叫main.vue，有的項目可能是app.vue頁面中去獲取,當然這個從store中取再存在sessionStorage中是爲了防止頁面F5刷新後store取不到數據問題，自己項目中也可以直接改爲從後端接口中取然後保存在sessionStorage中，具體情況也可以參照着改。
computed: {
sysConfig: function() {
//這裏的判斷是做樹默認展示層級配置
if(this.$store.getters.sysConfig.party_account_group_tree_top){
sessionStorage.setItem("partyAccountGroupTreeTop",this.$store.getters.sysConfig.party_account_group_tree_top)
}
return this.$store.getters.sysConfig;
},
},