项目中遇到树形控件懒加载+勾选功能同时需要的情况,发现不展开的情况选择父元素无法获取到子节点的数据,不符合业务要求。
解决方案:
element的check事件,并注意设置node-key,ref
<el-tree
lazy
:load="loadNode"
:expand-on-click-node="false"
show-checkbox
node-key="id"
ref="clienttree"
highlight-current
:props="defaultProps"
@check="onCheck"
>
<template #default="{ data,node }" >
<span class="custom-tree-node">
<img :src="node.expanded ? node.data.attributes && node.data.attributes.leaf ==='Y' ? leafImg :openImg :fatherImg" />
<span>{{node.label}}</span>
</span>
</template>
</el-tree>
onCheck(nodeData, treeChecked) {
let node = this.$refs.clienttree.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()
}
})
}
},