首先尝试了下懒加载。发现是时候会出现无法加载数据以及数据重新加载的问题,古世勇一次性给加载上去。
首先说一次性加载的适用方法
先确定tree的配置文件
label: 'name',
chcildren: 'children',
isLeaf: 'leaf'
看官网说明
label 就是你显示ui的值
chcildren 就是你下级目录的全部数据
isLeaf 指定一个字段 是否为子节点。为ture时 不为子节点
所以数据结构为
data:[
{
id": 主键,
"name": "名称",
"children": [ // 子节点的数据
{
"id": 主键,
"name": "名称",
"leaf": true //不为子节点
}
]
}
]
如果你用懒加载的话
要加上两个属性 ,去掉:data属性
<!-- 直接加入全部数据 :data="TreeData" -->
<el-scrollbar style="height:100%;">
<el-tree
:props="props"
node-key="id"
:load="loadNode"
lazy
ref="tree"
:expand-on-click-node="false"
@check-change="handleCheckChange"
show-checkbox>
</el-tree>
</el-scrollbar>
注意 为什么我要判断data.leaf ,因为我只需要二级节点的ID,且二级节点有leaf 这个属性且全部为ture
使用懒加载的话
绑定数据一定要用到
setTimeout(() => {
resolve(xxx)
}, 500)
这个才能绑定。我认为应该是一个延时处理渲染吧