element 导航菜单NavMenu组件由后端返回数据渲染 v-for循环折叠属性失效

最新推荐文章于 2023-08-09 12:14:59 发布

飞飞侯

最新推荐文章于 2023-08-09 12:14:59 发布

阅读量753

点赞数

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

本文链接：https://blog.csdn.net/pia_ji/article/details/115319877

版权

project 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

出现的问题：基于Vue2.x版本enlement-ui NavMenu组件由后端返回数据渲染，需进行循环，折叠属性失效了
解决：使用fragment
1.npm安装

npm i vue-fragment -s-d

2.main.js 全局引入注册

import Fragment from 'vue-fragment';
Vue.use(Fragment.Plugin);

3.Nav.vue使用

<fragment v-for="item in navList" :key="item.id">
    <el-menu-item :index="item.default_url" v-if="item.child.length === 0">
         .......
     </el-menu-item>
     <el-submenu  v-if="item.child.length > 0" :index="item.default_url">
           <template slot="title">
             ......
           </template>
           <el-menu-item-group>
                ......
                <el-menu-item v-for="it in item.child" :key="it.id" :index="it.default_url">
                    ......
                </el-menu-item>
           </el-menu-item-group>
     </el-submenu>
</fragment>