vue树形结构的实现

Tree组件是典型的递归组件，其他的诸如菜单组件都属于这⼀一类，也是相当常见的。

组件设计

Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推;同时添加一个标识管理理当前层级item的展开状态。

实现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: Object
  },
  data: function() {
    return {
      open: false  // 打开状态
    };
  },
  computed: {
    isFolder: function() { // 是否有子树
      return this.model.children && this.model.children.length;
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.open = !this.open;
      }
    },
  }
};
</script>

使⽤

<template>
  <div id="app">
    <ul>
      <item class="item" :model="treeData"></item>
    </ul>
  </div>
</template>
<script>
import Item from "./Item";
export default {
  name: "app",
  data() {
    return {
      treeData: {
        title: "我是一级第一个",
        children: [
          {
            title: "我是二级第一个"
          },
          {
            title: "我是二级第二个",
            children: [
              {
                title: "三级了-1"
              },
              {
                title: "三级了-2"
              }
            ]
          },
          {
            title: "二级第三个",
            children: [
              {
                title: "三级-1",
                expand: true,
                children: [
                  {
                    title: "四级-1"
                  },
                  {
                    title: "四级-2"
                  },
                  {
                    title: "四级-3"
                  }
                ]
              },
              {
                title: "三级-2",
                children: [
                  {
                    title: "四级-1"
                  },
                  {
                    title: "四级-2"
                  }
                ]
              },
              {
                title: "三级-3"
              }
            ]
          }
        ]
      }
    };
  },
  components: { Item }
};
</script>