element-ui 关于树形结构el-tree的笔记_elementui tree isleaf-程序员宅基地

技术标签： vue

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

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

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

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

本文链接：https://blog.csdn.net/qq_28218253/article/details/102931385

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ambari过程中Namenode拒绝连接，ambari失去心跳_ambari搭建ha will retry 2 time(s), caught exception:-程序员宅基地

文章浏览阅读1.6k次。namenode连接被拒绝：解决方法：在启动namenode过程中，手动启动hadoop-daemon.sh可能会得到解决。ambari失去心跳：解决方法：重启ambari-server跟agent 可能得到解决。..._ambari搭建ha will retry 2 time(s), caught exception: no active namenode was

飞腾1500A平台上构建Go语言环境指南_飞腾架构安装go-程序员宅基地

文章浏览阅读1.3k次。飞腾1500A平台上构建Go语言环境指南一、初识Go语言 Go语言是Google公司于2009年正式推出的一款开源的编程语言，是由Robert Griesemer、Ken Thompson和Rob Pike等世界顶尖计算科学家精心打造的系统编程语言。Go语言最显著的特点是编码简洁迅速、支持高效并发和自动内存管理等。此外，Go语言还面向网络服务器、存储系统和数据库等领域的编程进_飞腾架构安装go

Python使用pyinstaller打包成exe方法_pyinstaller.exe-程序员宅基地

文章浏览阅读8.1k次，点赞6次，收藏21次。python使用pyinstaller打包成exe文件_pyinstaller.exe

Tensorflow笔记__使用mnist数据集并测试自己的手写图片_py如何安装 mnist_backward-程序员宅基地

文章浏览阅读3.2k次，点赞4次，收藏24次。内容源于曹建老师的tensorflow笔记课程源码链接:https://github.com/cj0012/AI-Practice-Tensorflow-Notes测试图片下载:https://github.com/cj0012/AI-Practice-Tensorflow-Notes/blob/master/num.zip主要包含四个文件,主要是mnist_forward.py,mn..._py如何安装 mnist_backward

ASC20-21世界大学生超算竞赛落幕，暨南、清华分获冠亚军-程序员宅基地

文章浏览阅读540次。5月12日， 2020-2021 ASC世界大学生超级计算机竞赛（ASC20-21）总决赛在南方科技大学落下帷幕，在现场竞赛中，暨南大学、清华大学分别获得冠亚军，e Prize计算挑战奖和..._2020年超算竞赛获奖名单asc

VS＋QT向.pro文件添加pri文件_vs .pri-程序员宅基地

文章浏览阅读1.9k次，点赞2次，收藏4次。QT VS-addin通过如下方式添加pri文件不幸的是,这个功能似乎有问题万幸的是QT VS-addin能够导出pro文件在vs中卸载当前项目(重要)打开生成的pro文件,加入pri文件打开pro文件vs中加载项目..._vs .pri

随便推点

python安装zip包-python zip库怎么安装-问答-阿里云开发者社区-阿里云-程序员宅基地

文章浏览阅读5.1k次。一、方法1：单文件模块直接把文件拷贝到 $python_dir/Lib二、方法2：多文件模块，带setup.py下载模块包（压缩文件zip或tar.gz），进行解压，CMD->cd进入模块文件夹，执行：python setup.py install三、方法3：easy_install 方式先下载ez_setup.py,运行python ez_setup 进行easy_install工具的安装...

Lua - windows 中执行乱码（cmd、bash、vscode）_lua打开是乱码-程序员宅基地

文章浏览阅读1.7k次，点赞3次，收藏4次。通过 vscode 编译 a.lua 文件，通过 cmd 和 bash 执行 lua 来运行脚本，结果如下；国内 window cmd 下默认编码时GBK，而 windows 中 lua 也是以此作为默认编码的。bash 中 lua 依然以 gbk 格式执行 a.lua 文件。cmd 中 lua 以 gbk 格式执行 a.lua 文件。bash 以 utf8 格式读取 a.lua 文件。更改 a.lua 编码（utf8 => gbk）cmd 以 gbk 格式读取 a.lua 文件。更改 lua 默认编码。_lua打开是乱码

MATLAB仿真UR5机器人simulink simscape 自制建模正向运动学，逆向运动学关节空间轨迹规划五次多项式轨迹规划_采用五次多项式进行轨迹规划,采用逆动力学进行两自由度机器人的控制-程序员宅基地

文章浏览阅读1.6k次。本文详细介绍了利用MATLAB仿真UR5机器人的simulink simscape自制建模过程，并对其中的正向运动学、逆向运动学、关节空间轨迹规划、笛卡尔空间轨迹规划和直线插补进行了深入分析。接着，根据机器人的运动学模型，建立机器人各关节之间的约束关系，并添加外部力和碰撞检测模块，从而生成完整的机器人模型。摘要：本文介绍了利用MATLAB仿真UR5机器人的simulink simscape自制建模过程，并对其中的正向运动学、逆向运动学、关节空间轨迹规划、笛卡尔空间轨迹规划和直线插补进行了深入分析。_采用五次多项式进行轨迹规划,采用逆动力学进行两自由度机器人的控制