最近有要求觉得默认全展开或者默认都不展开树感觉不是很好，所以要求有的树展示默认展示两层或者三层，可以动态配置
思路步骤：
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;
},
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
