vue2：树形控件el-tree中加载两种不同结构的数据

我是飞鸟呀

已于 2024-09-19 15:21:13 修改

阅读量2.1k

点赞数 31

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js elementui javascript

于 2024-09-16 08:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/141858026

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

需求

需要在树形控件中逐级显示公司、部门以及不同部门下的项目信息。其中，公司及部门信息的结构是一致的，但是项目是另一种结构（类）。所以，树结构中需要用到两种不同结构的数据。

El-tree

主要属性

下面是一个el-tree控件，包含了其中主要的属性

<el-tree
   :data="projectOptions"     //树形图所绑定的数据
   :props="defaultTreeProps"  //配置选项，共四项，见下文
   :expand-on-click-node="false"
   :filter-node-method="filterNode"
   :default-expanded-keys="defaultShowNodes" //树形控件展开节点，是一个数组，从根节点到叶子节点
   :current-node-key="currentNodeKey"
   :load="loadTreeNode"      //lazy模式下，点击节点前的小三角时触发，加载该节点数据数据
   ref="tree"
   lazy

了解本专栏