Vue 树形结构图

<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"
        :key="model.index"
        :model="model"
      ></Item>
    </ul>
  </li>
</template>
<script>
// 数据样式
// treeData:{
//    title:"树形结构标题",
//    children:[
//       {title:'一级结构标题'},
//       {
//          title:"标题1",
//          children:[
//             {title:'标题1-1'},
//             {title:"标题1-2"}
//          ]
//       }
//    ]
// }
export default {
  name: 'Item',
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  computed: {
    isFolder() {
      return this.model.children && this.model.children.length > 0
    }
  },
  data() {
    return {
      open: false
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.open = !this.open
      }
    }
  }
}
</script>
<style lang="less" scoped></style>