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

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

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

先确定tree的配置文件

         label: 'name',
        chcildren: 'children',
        isLeaf: 'leaf'

看官网说明
element-ui 关于树形结构el-tree的笔记_第1张图片
label 就是你显示ui的值
chcildren 就是你下级目录的全部数据
isLeaf 指定一个字段 是否为子节点。为ture时 不为子节点

所以数据结构为

data:[
	{
		id": 主键,
      "name": "名称",
      "children": [ // 子节点的数据
	        {
	          "id": 主键,
	          "name": "名称",
	          "leaf": true //不为子节点
	        }
        ]
	}
]

如果你用懒加载的话
要加上两个属性 ,去掉:data属性
在这里插入图片描述
在这里插入图片描述

             
             
                
                
              

element-ui 关于树形结构el-tree的笔记_第2张图片
element-ui 关于树形结构el-tree的笔记_第3张图片
注意 为什么我要判断data.leaf ,因为我只需要二级节点的ID,且二级节点有leaf 这个属性且全部为ture
element-ui 关于树形结构el-tree的笔记_第4张图片
使用懒加载的话
绑定数据一定要用到

   setTimeout(() => {
          resolve(xxx)
        }, 500)

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

你可能感兴趣的:(element-ui 关于树形结构el-tree的笔记)