element-ui tree懒加载树实现勾选时自动展开功能
背景:项目中遇到树形控件懒加载+勾选功能同时需要的情况,发现不展开的情况选择父元素无法获取到子节点的数据,不符合业务要求。
解决方案:
1.监听check事件,并注意设置node-key,ref
<el-tree
ref="tree"
:props="props"
:load="loadNode"
lazy
node-key="id"
@check="handleCheck"
show-checkbox
>
</el-tree>
2.手动展开节点,使用node.expand()方法
handleCheck(nodeData, treeChecked) {
let node = this.$refs.tree.getNode(nodeData.id)
//展开选中的未展开的非叶子节点
if(node.checked && !node.expanded && !node.isLeaf){
node.expand(function(){
for(let i=0; i< node.childNodes.length; i++){
node.childNodes[i].expand()
}
})
}
}