递归组件Item创建
// Tree组件实现
// 递归组件item创建
<template>
<li>
<div @click="toggle">
{{model.title}}
<span v-if="isFolder">[{{open?'-':'+'}}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item class="item" v-for="model in model.children" :model="model" :key="model.title"></item>
</ul>
</li>
</template>
<script>
export default {
name:"Item",
props:{
model:{
type:Object,
required:true
}
},
data(){
return {
open: false
}
}
computed:{
isFolder(){
return this.model.children && this.model.children.length
}
},
methods:{
toggle(){
if(this.isFolder){
this.open = !this.open
}
}
}
}
</script>
数据和使用
<template>
<div>
<ul>
<item class="item" :model="treeData"></item>
</ul>
</div>
</template>
<script>
import Item from "./Item";
export default {
name: "app",
data() {
return {
treeData: {
title: "Web全栈架构师",
children: [
{
title: "Java架构师"
},
{
title: "JS高级",
children: [
{
title: "ES6"
},
{
title: "动效"
}
]
},
{
title: "Web全栈",
children: [
{
title: "Vue训练营",
expand: true,
children: [
{
title: "组件化"
},
{
title: "源码"
},
{
title: "docker部署"
}
]
},
{
title: "React",
children: [
{
title: "JSX"
},
{
title: "虚拟DOM"
}
]
},
{
title: "Node"
}
]
}
]
}
};
},
components: { Item }
};
</script>