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>