view-ui,四级动态菜单目录，点击跳转

最新推荐文章于 2024-08-13 00:11:49 发布

小程序大梦想

最新推荐文章于 2024-08-13 00:11:49 发布

阅读量420

点赞数

分类专栏： vue 文章标签：目录动态菜单点击跳转 view vue

本文链接：https://blog.youkuaiyun.com/qq_39594951/article/details/114091552

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

博客提及有配置动态目录并实现点击跳转的需求，采用了view - ui，四级菜单数据由后端返回且为嵌套数据，给出的代码可作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.有需求要求配置一个动态目录，并且点击哪里跳转到哪里

我采用了view-ui,四级菜单是后端返回的嵌套数据,此代码仅作为参考

<Menu active-name="2" :accordion="true">
                <Submenu name="2">
                    <template slot="title">
                        <b>目录</b><Icon  style="position:absolute;top:35%;right:30px;" type="ios-arrow-down" />
                    </template>
                    <Submenu :class="item.id"  :name="'2-' + index" v-for="(item,index) in contwz" :key="index" >
                        <template slot="title" > <a  @click="changeHash('#n' + item.id,item.id)" ><p  v-html="item.name" style="font-size:14px !important;">{{item.name}}</p></a><Icon v-if="item.children.length>0" style="position:absolute;top:30%;right:30px;" type="ios-arrow-down" /></template>
                        <span v-if="item.children">
                        <Submenu :class="itemtwo.id" :name="'2-' + index + '-' + indextwo" v-for="(itemtwo,indextwo) in item.children" :key="indextwo">
                            <template slot="title" > <a @click="changeHash('#n' + itemtwo.id,itemtwo.id)"><p v-html="itemtwo.name" style="font-size:14px !important;">{{itemtwo.name}}</p></a><Icon v-if="itemtwo.children.length>0" style="position:absolute;top:30%;right:30px;" type="ios-arrow-down" /></template>
                            <span v-if="itemtwo.children">
                                <Submenu :name="2- + '' + index + '' + indextwo + '' + indexthird" v-for="(itemthird,indexthird) in itemtwo.children" :key="indexthird">
                                    <template slot="title" > <a @click="changeHash( itemthird.id)"><p v-html="itemthird.name" style="font-size:14px;">{{itemthird.name}}</p></a><Icon v-if="itemthird.children.length>0" style="position:absolute;top:30%;right:30px;" type="ios-arrow-down" /></template>
                                    <span v-if="itemthird.children">
                                         <Submenu :name="2- + '' + index + '' + indextwo + '' + indexthird + '' + indexfour" v-for="(itemfour,indexfour) in itemthird.children" :key="indexfour">
                                            <template slot="title" > <a @click="changeHash('#n' + itemfour.id)"><p v-html="itemfour.name" style="font-size:14px;">{{itemfour.name}}</p></a><Icon v-if="itemfour.children.length>0" style="position:absolute;top:30%;right:30px;" type="ios-arrow-down" /></template>
                                         </Submenu>
                                    </span>
                                </Submenu>
                            </span>
                        </Submenu>
                        </span>
                    </Submenu>
                </Submenu>
            </Menu>