Vue练习—树形组件

一、树形组件

简单来说就是一个简单地三级列表菜单。
解构和逻辑都非常简单，主要还是考验自己对所学知识的应用。这里的注释比较少，不懂可以多思考。

//
<template>
    <div class="#app">
        <base-tree :data="data"/>
    </div>
</template>
<script>
import BaseTree from "./Tree";//导入组件
export default {
    components: {
        BaseTree   //定义组件名
    },
    data(){
        return {
            data: [{
                label: "一级 1",
                children: [
                {
                    label: "二级 1-1",
                    children: [
                    {
                        label: "三级 1-1-1"
                    }
                    ]
                }
                ]
            },
            {
                label: "一级 2",
                children: [
                {
                    label: "二级 2-1",
                    children: [
                    {
                        label: "三级 2-1-1"
                    }
                    ]
                },
                {
                    label: "二级 2-2",
                    children: [
                    {
                        label: "三级 2-2-1"
                    }
                    ]
                }
                ]
            },
            {
                label: "一级 3",
                children: [
                {
                    label: "二级 3-1",
                    children: [
                    {
                        label: "三级 3-1-1"
                    }
                    ]
                },
                {
                    label: "二级 3-2",
                    children: [
                    {
                        label: "三级 3-2-1"
                    }
                    ]
                }
                ]
            }]
        }
    }
}
</script>

<template>
    <ul class="tree">
        <li class="tree-node" v-for="(node,index) in data" :key="node[defaultProps.label]">
            <i class="iconfont" v-if="node[defaultProps.children]" 
            :class="{
                'icon-down': !showChildren[index],//打开就更换图标
                'icon-right': showChildren[index]
            }"></i>
            <span class="node-label" @click="handleClick(index)">
                {{ node[defaultProps.label] }}
            </span>
            <keep-alive>//缓存状态，上次怎么打开的闭合后再打开是一样的
                <base-tree :data="node[defaultProps.children]"
                v-if="showChildren[index] && node[defaultProps.children]"/>//如果子菜单不存在就不显示，否则最后一级菜单点击会报错
            </keep-alive> 
        </li>
    </ul>
</template>
<script>
export default {
    name: 'base-tree',
    props: {
        data: {
            type: Array,
            required: true
        },
        defaultProps: {
            type: Object,
            default: ()=>({
                label: 'label',
                children: 'children'
            })
        }
    },
    data(){
        return {
            showChildren: []
        }
    },
    methods: {
        handleClick(index) {
            const flag = !this.showChildren[index];//判断子菜单，不存在就显示
            this.showChildren[index] = !this.showChildren[index];
            this.$set(this.showChildren,index,flag);
        },
    },
    mounted(){
        // console.log(this.data);
    }
}
</script>
<style scoped>
    @import "./assets/font.css";//这里主要是引入一些图标，可以在阿里图标库自行下载
    li{
        list-style: none;
    }
    .tree-node{
        font-size: 14px;
        cursor: pointer;
    }
    .tree-node .iconfont{
        color: #c0c4cc;
        font-size: 12px;
        margin-right: 5px;
        vertical-align: middle;
    }
    .tree-node .node-label {
        font-size: 14px;
        color: #606266;
        vertical-align: middle;
    }
</style>