vuetify学习第5天之树形组件-treeview

vuetify学习第4天之树形组件-treeview

---

目录

---

---

内容

---

1、效果图

2、源代码

    本例使用环境为vue框架

后端返回数据示例：
[
	 {
        "id": 1,
        "name": "图书、音像、电子书刊",
        "icon": "",
        "isParent": 1
    },
    {
        "id": 74,
        "name": "手机",
        "icon": "cellphone-basic",
        "isParent": 1
    }
	...
]

3、v-treeview常用属性

名称	类型	默认值	作用
active	array	[]	当前激活的叶子节点，.sync为同步
items	array	[]	渲染的数据
item-key	any		每一项的唯一标记，被记录到active数组
load-children	function		子节点懒加载函数
open-on-click	boolean	false	是否点击打开
hoverable	boolean	false	是否鼠标悬停打开
return-object	boolean	false	是否返回对象，默认返回item-key,如果为true，则返回当前渲染的对象，active中存储为对象
activatable	boolean	false	是否通过点击标记为激活状态
transition	boolean	false	是否节点打开或者关闭是播放动画
dense	boolean	fale	是否紧凑显示

4、v-treeview 常用插槽

    本例使用前置插槽，显示不同分类对应不同图标。时间有限，只找了几个图标，其他都用文件夹图标代替。

4.1、配置：

通用：
{
  item: any
  leaf: boolean
  selected: boolean
  indeterminate: boolean
  active: boolean
  open: boolean
}
本例：
 

5、常用事件

5、1详解

名称	参数类型	默认值	作用
update:active	array	[]	点击叶子节点时触发

官网地址：https://vuetifyjs.com/en/components/treeview#treeview
后记 ： 当需要实现子节点懒加载时，既配置load-children对应的函数，必须返回异步对象，比如常用的promise对象。不然出现第一次点击不会展开，再次点击展开子节点的情况。