el-tree懒加载

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

你可能感兴趣的:(elementUI)