vue.js树型结构实现

参考：http://www.cnblogs.com/ychl/p/6075106.html

虽然文章给出的方法可以实现树结构，使用的图标是boostrap提供的fa类别的图标。参考文献中的代码：

父组件中引入items

  <items  :model='model' v-for='model in data'></items>

以下是items.vue的内容
<template>
    <li>
        <div @click='toggle'>
            <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
            <!--isFolder判断是否存在子级改变图标-->
            <i v-if='!isFolder' class="fa fa-file-text"></i> {
  {model.data.menuName}}
        </div>
        <ul v-show="open" v-if='isFolder'>
            <items v-for='cel in model.childTreeNode' :model='cel'></items>
        </ul>
    </li>
</template>
<script type="text/javascript">
    export default {
        name: 'items',
        props: ['model'],
        components: {},
        data() {
            return {
                open: false,
                isFolder: true
            }
        },
        computed: {
            isFolder: function() {
                return this.mo