- 最近有个需求,懒加载树形结构,默认展开二级节点。试了获取节点设置节点的expanded属性,发现不生效
this.$refs.tree.store.nodesMap[data.id].expanded = true
- 看了下官方文档利用default-expanded-keys属性,懒加载第一级的时候将第一级节点的key放到定义的默认展开数组即default-expanded-keys动态绑定的数组就可以实现改工能
- 部分代码入下图
//css
<el-tree
ref="menuTree"
:props="defaultProps"
node-key="id"
:key="treeKey"
lazy
:default-expanded-keys="treeExpandelKeys"
:load="loadDeptNode"
:highlight-current="true"
@node-contextmenu="rightClick"
@node-expand="nodeExpand"
></el-tree>
//js
loadDeptNode(node, resolve, cb) {
this.resolve = resolve;
// 查询参数
let reqData = {
roleTypeId: this.roleTypeId,
};
if (node.level === 0) {
this.rootNode = node;
this.rootNode_resolve = resolve; //同上,把node.level == 0的resolve也存起来
resolve([this.rootNodeData]);
this.treeExpandelKeys.push(this.rootNodeData.id)
this.fristNodeKeys.push(this.rootNodeData.id)
} else if (node.level > 0) {
// 向后台发送查询请求
getNodesService({ params: { node: node.data.id } })
.then((res) => {
// 请求成功,且查询出有数据时
if (res && res.data) {
let resData = res.data || [];
var newN = [];
resData.forEach((it) => {
let newIt = Object.assign({}, it, {
leaf: it.leaf == "1" ? true : false,
});
newN.push(newIt);
});
if(node.level == 1){
this.secondNodeKeys = [];
newN.forEach(item=>{
this.secondNodeKeys.push(item.id)
})
}
resolve(newN);
}
// 请求失败的情况,或者是查无数据的时候
else {
resolve([]);
}
})
.catch((e) => {
if (node.level === 0) {
resolve(treeData);
} else {
resolve([]);
}
});
}
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63