vue.js 树菜单 递归组件树来实现

Posted 2020-10-14 James的博客园

 

树形视图 Example: https://vuefe.cn/v2/examples/tree-view.html

参照前辈方法实现的，觉得不错，记录一下：

 

父组件：

<!-- 菜单树 -->
                <ul class="T_down" v-for="(menuItem,index) in customerArray" :key="index">
                    <tree-menu :treeData="menuItem"></tree-menu>
                </ul>


import treeMenu from \'./treeMenu.vue\'


myMailTree: [
                {
                    id: 0,
                    label: \'发件箱\',
                    children: []
                },
                {
                    id: 1,
                    label: \'收件箱\',
                    children: [
                        {
                            id: 11,
                            label: \'常用邮件\',
                        },
                        {
                            id: 12,
                            label: \'常用邮件\',
                            children: [
                                {
                                    id: 11,
                                    label: \'常用邮件\',
                                    children: [
                                        {
                                            id: 11,
                                            label: \'常用邮件\',
                                        },
                                        {
                                            id: 12,
                                            label: \'常用邮件\',
                                            children: [
                                                {
                                                    id: 11,
                                                    label: \'常用邮件\',
                                                },
                                                {
                                                    id: 12,
                                                    label: \'常用邮件\',
                                                    children: [
                                                        {
                                                            id: 11,
                                                            label: \'常用邮件\',
                                                        },
                                                        {
                                                            id: 12,
                                                            label: \'常用邮件\',
                                                        },
                                                    ]
                                                },
                                            ]
                                        },
                                    ]
                                },
                                {
                                    id: 12,
                                    label: \'常用邮件\',
                                },
                            ]
                        },
                    ]
                },
                {
                    id: 3,
                    label: \'草稿箱\',
                },
            ],



 components: {
        \'tree-menu\': treeMenu
    },

 

子组件：

<template>
    <li>
        <h3>
            <i v-if="isFolder" @click="toggle" class="iconfont" :class="[open ? \'icon-arrow-down\': \'icon-arrow-right\']"></i>
            <span class="label">{{treeData.label}}
                <em>(99)</em>
            </span>
            <span class="T_set">
                <i class="iconfont icon-subordinate"></i>
                <i class="iconfont icon-subordinate"></i>
                <i class="iconfont icon-subordinate"></i>
            </span>
        </h3>
        <ul class="T_down" v-show="open" v-if="isFolder">
            <tree-menu v-for="item in treeData.children" :key="item.id" :treeData="item"></tree-menu>
        </ul>
    </li>
</template>

<script>
export default {
    name: \'treeMenu\',
    props: [\'treeData\'],
    data() {
        return {
            open: false
        }
    },
    computed: {
        isFolder() {
            return this.treeData.children && this.treeData.children.length
        }
    },
    methods: {
        toggle: function() {
            if (this.isFolder) {
                this.open = !this.open
            }
        }
    }
}
</script>

less

ul.T_down {
                    //菜单树
                    // border: 1px solid red;
                    background-color: #fff;
                    padding-left: 17px;
                    line-height: 35px;
                    li {
                        >h3 {
                            // border: 1px solid red;
                            font-weight: normal;
                            font-size: 14px;
                            padding-left: 23px;
                            cursor: default;
                            position: relative;
                            >i.iconfont {
                                display: block;
                                width: 23px;
                                height: 100%;
                                text-align: center;
                                font-size: 12px;
                                position: absolute;
                                left: 0;
                                top: 0;
                                &:hover {
                                    color: #008cee;
                                    cursor: pointer;
                                }
                            }
                            >span.label {
                                color: #555;
                                >em {
                                    font-size: 12px;
                                    font-style: normal;
                                    color: #888;
                                }
                            }
                            &:hover {
                                background-color: #ddd;
                                span.T_set {
                                    display: block;
                                }
                            }
                            span.T_set {
                                float: right;
                                margin-right: 10px;
                                display: none;
                                i.iconfont {
                                    display: inline-block;
                                    padding: 0 2px;
                                    font-size: 13px;
                                    &:hover {
                                        color: #008cee;
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                    }
                }

 

参考链接：

https://www.cnblogs.com/caihg/p/6208105.html

 

 

.