树组件
Siona
树组件
一、简介
关于树结构形式的效果，在工作中很常见，如：菜单树、权限树、关系组织树等一些展示层级关系的功能。 本文使用组件递归的思想，实现一个树组件，我们先看一下效果图：
树组件三大核心功能
基本功能
- 根据 json 树结构的数据递归组件展示层级关系（树节点要有缩进问题，树层级越深，越往右靠）
- 点击树的某个节点给树节点加上一个聚焦状态（点击加上背景色，点击别的地方背景色消失）
- 点击小图标收起树的子节点（展开与折叠）
- 统一控制树的展开或者收起（统一展开与统一折叠）
- 树组件小图标的更改（可以使用插槽，这里笔者使用的类名变量更改的，思想是一样的）
- 没有数据时，树组件做一个提示没数据（加个判断即可）
- 事件的传递（点击小图标折叠树节点、点击树节点item）
勾选 ☑️
树节点懒加载
二、具体实现
1. 根据 json 数据，递归组件展示层次关系
let treeData = [
{
label: "中国",
eng: "China",
children: [
{
label: "北京",
eng: "Beijing"
},
{
label: "上海",
eng: "Shanghai",
children: [
{
label: "徐汇区",
eng: "Xuhui"
},
{
label: "浦东新区",
eng: "Pudong"
}
]
}
]
},
{
label: "美国",
eng: "American",
children: [
{
label: "纽约",
eng: "NewYork",
children: [
{
label: "曼哈顿区",
eng: "Manhattan"
},
{
label: "皇后区",
eng: "Queen"
},
{
label: "布鲁克林区",
eng: "Brooklyn"
}
]
}, {
label: "华盛顿",
eng: "Washington"
}
]
}
]
首先定义两个组件：Tree、TreeItem。其中 Tree 是主组件，用于暴露给外部使用；TreeItem 是用于递归的组件。
<Tree :treeData="treeData"></Tree>