实现树组件

Item.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"
                :model="model"
                :key="model.title"
            ></item>
        </ul>
    </li>
</template>
<script>
export default {
    name: "Item",
    props: {
        model: Object
    },
    data(){
        return{
            open: false // 打开状态
        }
    },
    computed: {
        isFolder(){ // 是否有子树
            return this.model.children && this.model.children.length
        }
    },
    methods: {
        toggle(){
            if(this.isFolder) {
                this.open = ! this.open
            }
        }   
    }
}
</script>

 

index.vue文件

<template>
    <div id="app">
        <ul>
            <item class="item" :model="treeData"></item>
        </ul>
    </div>
</template>

<script>
import Item from './Item.vue'
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
    },
    created () {
    }
}
</script>

<style lang='scss' scoped>

</style>

 

使用文件

<div id="app">
    <Tree></Tree>
</div>

import Tree from './components/tree'

components: {
    Tree
  }

 

转载于:https://www.cnblogs.com/haishen/p/11307669.html