element Tree 树形控件

本文详细介绍了如何在Vue中使用树形组件实现懒加载功能,通过点击节点动态请求子节点数据,展示了具体的代码实现过程及关键函数说明。

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

默认所有一级先展示出来 通过点击当前的节点来获取子级然后遍历出来(父级和子级是两个接口)
这里父级的获取方法我就不写了 直接把子级的方法写出来

return {
                data:[],//父级数组
                defaultProps: {
                    label: 'name',
                    id:'id',
                    // children: 'zones',
                    // isLeaf: 'leaf'
                }
            };
        },
<el-tree  :props="defaultProps" :load="loadNode" :data="data"  icon-class='el-icon-arrow-right' class='treeBox'  lazy @node-click="handleNodeClick">
                <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span :class="data.icon" style='display:none;'></span>  
                    <span>{{ node.label }}</span>
                </span> -->
</el-tree>
 handleNodeClick(data) {//每次点击获取当前点击公司的id
                console.log(data.id);
            },
			 //tree 展示子级方法
            loadNode(node, resolve) {
                // console.log("node");
                // console.log(node);
                // console.log(node.data.id);//这里可以打印我选中的数据的id
                // this.listByParentId1(node.data.id);
                // test
                let children = []
                let param = {
				param: JSON.stringify({
					departmentld: node.data.id
				})};
				listByParentId(param).then(result => {
					if (result.code == '000000') {
                        children = result.data;
					} else if (result.code == '100000') {
								
                    }
				}).catch(error => {
					console.log(error);
                })
                setTimeout(() => {
                    console.log(children)
                    resolve(children);
                }, 500);
                
            }

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值