vue手写三级分类折叠展开

最新推荐文章于 2024-08-29 16:34:49 发布

urnotlynley

最新推荐文章于 2024-08-29 16:34:49 发布

阅读量3.2k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43056561/article/details/82593301

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是视图层：

    <div class="tree">
                <ul  v-for='item in menulist' :key="item.id">
                    <!-- 没有子集 -->
                    <li v-if='!item._child'>
                        <div class="treeItem">
                            {{item.catename}}
                            <div class="liright">
                                <span :class="item.enabled_text == '启用'?'bgYes':'bgNo'">{{item.enabled_text}}</span>
                            </div>
                        </div> 
                    </li>
                    <!-- 有子集 -->
                    <li  v-if='item._child' >
                        <div class="onechild treeItem" @click.stop='toggleChildren(item)'>
                            {{item.expanded?'► ':'▼ '}}{{item.catename}}
                            <div class="liright">
                                <span :class="item.enabled_text == '启用'?'bgYes':'bgNo'">{{item.enabled_text}}</span>
                               </div>
                        </div>
                        <ul v-show='item.expanded' class="childs">
                            <li v-for='child in item._child' :key="child.id">
                                <!-- 没有子集 -->
                                <div class="twochild treeItem marginL60" v-if="!child._child">{{child.catename}}
                                    <div class="liright">
                                        <span :class="child.enabled_text == '启用'?'bgYes':'bgNo'">{{child.enabled_text}}</span>
                                    </div>
                                </div>
                                <!-- 有子集 -->
                                <div class="twochild marginL60" v-if="child._child"  @click='toggleChildren(child)'>
                                    <div class="treeItem">
                                        {{child.expanded?'► ':'▼'}}{{child.catename}}
                                        <div class="liright">
                                            <span :class="child.enabled_text == '启用'?'bgYes':'bgNo'">{{child.enabled_text}}</span>
                                        </div>
                                    </div>

                                    <ul v-show='child.expanded'>
                                        <!-- 遍历第三层 -->
                                        <li class="threechild " v-for="child1 in child._child" :key="child1.id">
                                            <div class="treeItem marginL60">
                                                {{child1.catename}}
                                                <div class="liright">
                                                    <span :class="child1.enabled_text == '启用'?'bgYes':'bgNo'">{{child1.enabled_text}}</span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>

这是逻辑层：
模拟数据(data里的数据)：

  menulist:[{
                catename:'水果',
                expanded:false,
                _child:[{
                    catename:'苹果',
                    },{
                    catename:'荔枝'
                    },{
                    catename:'葡萄'
                    },{
                    catename:'火龙果',
                    expanded:false,
                    _child:[
                        {
                        catename:'白心',
                        },{
                        catename:'红心'
                        },
                    ]

                }]
            }]

下面是切换的函数：

// 切换展开收起
        toggleChildren: function(item) {
            // console.log(item)
            item.expanded = !item.expanded;
        },