el-tree懒加载

1.此组件渲染节点层时,只认label为节点名称,children为子节点数组
2.props用于将字段名称转化为对应的label和children
3.懒加载,同一接口每次用当前节点的id做入参请求其子节点,返回数据既是子节点数据,则每次返回的数据结构相同,key相同,value不同。
懒加载代码:
在这里插入图片描述
一:要根节点
在这里插入图片描述
在这里插入图片描述
根节点:
在这里插入图片描述
视图:
在这里插入图片描述
在这里插入图片描述
当初始化树时,node.level为0,默认加载根节点,当点击节点时,node.level++,会走else来加载子节点,将返回的数据用临时变量存储,再将临时变量传进resolve函数,resolve函数内会将临时变量作为此点击节点的children属性来动态添加进渲染树的绑定数组blocClasstreeData,所以这儿必须用临时变量,而不能直接将数据模型data里的blocClasstreeData传进resolve函数,这样每层都会包含所有树节点而不是当前树节点。
二:不要根节点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在控制台可以看见,树初始化时,打印node的data为一个数组(树绑定的空数组数据源),点击节点再打印时,node的data为对象且name是此节点层上层节点的名称‘信息安全及专项’;所以此处的node都是上层的节点。要取当前节点的属性就要在请求数据之前。

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值