element tree懒加载默认展开指定节点
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
- 最近有个需求,懒加载树形结构,默认展开二级节点。试了获取节点设置节点的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([]);
}
});
}
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)