element-ui tree懒加载树实现勾选时自动展开功能

Hans0924

于 2024-03-26 17:21:14 发布

阅读量488

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_40455697/article/details/137052374

文章讲述了在项目中如何处理树形控件的懒加载策略与勾选功能需求，遇到的问题是当不展开节点时无法获取其子节点数据。通过使用`element的check事件`，结合`node-key`和`ref`属性，作者提供了代码示例来实现展开节点后获取子节点数据的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到树形控件懒加载+勾选功能同时需要的情况，发现不展开的情况选择父元素无法获取到子节点的数据，不符合业务要求。
解决方案：
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()
            }
        })
    }
},