vuetify学习第4天之树形组件-treeview
目录
文章目录
内容
1、效果图
2、源代码
本例使用环境为vue框架
<template>
...
<v-treeview
:active.sync="active"
:open.sync="open"
:items="categoryList"
item-key="id"
:load-children="loadChildren"
open-on-click
return-object
activatable
transition
dense
@update:active="updateActive"
>
<template v-slot:prepend="{ item, open }">
<v-icon v-if="!item.icon">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
<v-icon v-else>{{ 'mdi-'+ item.icon }}</v-icon>
</template>
</v-treeview>
...
</template>
<script>
// const pause = ms => new Promise(resolve => setTimeout(resolve, ms));
export default {
data() {
return {
open: [],
active: [],
categoryList: [],
selected: {
id: 0,
items: []
}
};
},
created() {
this.getCategoryList(0);
},
computed: {},
watch: {
active: {
deep: true,
handler() {
this.selected.id = this.active[0].id;
const items = this.active[0]._name.split(",");
items.map(el => {
return {
text: el
};
});
this.selected.items = items;
// console.log(this.selected);
}
}
},
methods: {
// 获取分类列表
getCategoryList(pid) {
// console.log(item.id);
this.axios
.get("/item/category/list", {
params: {
pid: pid
}
})
.then(resp => {
if (resp.status != 200) {
this.$message.error("获取分类列表失败");
}
resp.data.forEach(el => {
el._name = el.name;
if (el.isParent) {
el.children = [];
}
});
this.categoryList = resp.data;
});
},
// 子分类懒加载
loadChildren(item) {
// console.log(item.isParent);
// await pause(1500);
return this.axios
.get("/item/category/list", {
params: {
pid: item.id
}
})
.then(resp => {
if (resp.status != 200) {
this.$message.error("获取分类列表失败");
}
resp.data.forEach(el => {
el._name = item._name + "," + el.name;
if (el.isParent) {
el.children = [];
}
});
item.children.push(...resp.data);
});
}
...
</script>
后端返回数据示例：
[
{
"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
}
本例：
<template v-slot:prepend="{ item, open }">
<v-icon v-if="!item.icon">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
<v-icon v-else>{{ 'mdi-'+ item.icon }}</v-icon>
</template>
5、常用事件
5、1详解
| 名称 | 参数类型 | 默认值 | 作用 |
|---|---|---|---|
| update:active | array | [] | 点击叶子节点时触发 |
官网地址：https://vuetifyjs.com/en/components/treeview#treeview
后记 ： 当需要实现子节点懒加载时，既配置load-children对应的函数，必须返回异步对象，比如常用的promise对象。不然出现第一次点击不会展开，再次点击展开子节点的情况。