Tree组件实现

递归组件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>