element-ui 关于树形结构el-tree的笔记

首先尝试了下懒加载。发现是时候会出现无法加载数据以及数据重新加载的问题，古世勇一次性给加载上去。

首先说一次性加载的适用方法

先确定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)

这个才能绑定。我认为应该是一个延时处理渲染吧