NavMenu使用了for渲染后，无法正常展开菜单 #2670

arzcl · 2017-02-05T05:43:50Z

NavMenu使用了for渲染，并启用了 :default-active="$route.path"后，发现在刷新页面的时候，能高亮却无法正确展开菜单

<el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true">
                        <template v-for="(item, index) in columnArray">
                            <el-submenu v-if="item.route === 'nav'" :index="index + ''">
                                <template slot="title">
                                    <i :class="item.icon "></i>{{ item.name }}
                                </template>
                                <el-menu-item v-for="tree in item.column" :index="tree.route">
                                    {{ tree.name }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="item.route">
                                <i :class="item.icon"></i>{{ item.name }}
                            </el-menu-item>
                        </template>
                    </el-menu>

The text was updated successfully, but these errors were encountered:

erguotou520 · 2017-02-07T01:33:43Z

能先格式化下你的代码么用3个斜点

arzcl · 2017-02-07T05:41:05Z

@erguotou520 已经格式好了，重新帮忙看下，感谢~

<el-menu :default-active="$route.path" class="el-menu-vertical-demo">
       <template v-for="(item, keys) in columnArray">
             <template v-if="item.route === 'nav'">
                  <el-submenu :index="keys + ''">
                       <template slot="title">
                           <i :class="item.icon "></i>{{ item.name }}
                        </template>
                        <template v-for="tree in item.column">
                              <router-link :to="tree.route">
                                   <el-menu-item :index="tree.route">
                                        {{ tree.name }}
                                   </el-menu-item>
                               </router-link>
                            </template>
                      </el-submenu>
                 </template>
                  <template v-else>
                        <router-link :to="item.route">
                            <el-menu-item :index="item.route">
                                   <i :class="item.icon"></i>{{ item.name }}
                            </el-menu-item>
                        </router-link>
                     </template>
         </template>
</el-menu>

erguotou520 · 2017-02-07T07:50:13Z

既然用了el-menu-item的index做路由跳转应该就不要用router-link了，至于为什么没展开就不是很清楚了

arzcl · 2017-02-07T07:50:25Z

@erguotou520 设置了default-openeds="[2]"之后，的确能默认展开，但是却无法点击关闭，看了这个issue：#2279 用:default-openeds="[2]" 却无法默认展开，在官网文档也没找到default-openeds的用法教程，，

erguotou520 · 2017-02-07T07:52:53Z

刚那条评论删了，因为我发现我的系统也没设置default-openeds就可以自动展开

arzcl · 2017-02-07T07:54:42Z

@erguotou520 好吧，那只能先这样了，非常感谢您的热心帮助！

arzcl · 2017-02-07T07:56:52Z

@erguotou520 对的，这个router-link是多余的，删掉了~

erguotou520 · 2017-02-07T07:59:08Z

还有，不需要template来辅助，直接在el-submenu和el-menu-item上v-if是可以的

arzcl · 2017-02-07T08:05:00Z

@erguotou520 的确可以，一下子就简洁多了，刚刚接触vue，不太熟悉，真的感谢

erguotou520 · 2017-02-07T08:07:29Z

如果就按照正常的来，应该是可以自动展开的，你重新试下，如果可以的话就关了issue

arzcl · 2017-02-07T08:27:12Z

@erguotou520 还是不能正常展开，只能高亮

<el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true">
                        <template v-for="(item, index) in columnArray">
                            <el-submenu v-if="item.route === 'nav'" :index="index + ''">
                                <template slot="title">
                                    <i :class="item.icon "></i>{{ item.name }}
                                </template>
                                <el-menu-item v-for="tree in item.column" :index="tree.route">
                                    {{ tree.name }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="item.route">
                                <i :class="item.icon"></i>{{ item.name }}
                            </el-menu-item>
                        </template>
                    </el-menu>
您那边用for渲染能正常展开吗？不知道是不是我用法有问题，，，

erguotou520 · 2017-02-07T08:31:30Z

我的是可以的，至于你的为什么不行，得问他们开发的了

arzcl · 2017-02-07T08:34:00Z

@erguotou520 那可以麻烦您把这段菜单渲染发上来看看么，，我比对参照下

erguotou520 · 2017-02-07T08:39:55Z

<el-menu :default-active="$route.path" theme="dark" :router="true">
  <el-menu-item index="/subsystems"><i class="iconfont icon-system"></i>{{$t('menu.subsystem')}}</el-menu-item>
  <el-submenu index="/workflow">
    <template slot="title"><i class="iconfont icon-process"></i>{{$t('menu.flow')}}</template>
    <el-menu-item index="/flow/workflows"><i class="iconfont icon-template"></i>{{$t('menu.workflows')}}</el-menu-item>
    <el-menu-item index="/flow/my"><i class="iconfont icon-flow"></i>{{$t('menu.myFlow')}}</el-menu-item>
  </el-submenu>
  <el-submenu index="/base">
    <template slot="title"><i class="el-icon-information"></i>{{$t('menu.base')}}</template>
    <el-menu-item index="/base/departments"><i class="iconfont icon-cluster"></i>{{$t('menu.departments')}}</el-menu-item>
    <el-menu-item index="/base/users"><i class="iconfont icon-users"></i>{{$t('menu.users')}}</el-menu-item>
    <el-menu-item index="/base/roles"><i class="iconfont icon-roles"></i>{{$t('menu.roles')}}</el-menu-item>
  </el-submenu>
</el-menu>

arzcl · 2017-02-07T08:51:02Z

@erguotou520 我刚刚开始就是这样手动写的，是没问题，但是全部用for渲染就无效

erguotou520 · 2017-02-07T09:17:47Z

这就不是很清楚了

arzcl · 2017-02-07T09:23:58Z

@erguotou520 嗯嗯，非常感谢您的帮助

forzalianjunting · 2017-02-09T08:33:56Z

我也遇见了同样的问题，刷新的时候，如果全部是手写的菜单，menu-item高亮的时候，对应的submenu就会展开；但如果是通过v-for渲染的，则menu-item高亮，但对应的submenu并不会展开

ckken · 2017-02-23T08:19:03Z

遇到同样问题无解

uojo · 2017-03-01T12:50:18Z

遇到同样的问题，无解，用for 循环传入的 index ，只能高亮，不能自动展开

my9074 · 2017-03-02T03:27:32Z

同上，用for 循环传入的 index ，只能高亮，不能自动展开。感觉 default-openeds 属性支持的不是特别友好

baimiaolei · 2017-03-09T02:09:09Z

同上，用for循环不能自动展开无解

kouguopeng · 2017-03-10T01:55:58Z

我的可以

感觉是你数据结构的问题

reverland · 2017-03-22T03:02:45Z

我好像因为动态生成menu内容遇到类似的问题了，可能你们的遍历数据开始是空的？
暂时用了一些奇怪的workaround来避免这个问题

arzcl · 2017-03-22T10:03:52Z

@reverland 感觉应该是这个原因导致的，今晚回去测试下，如果是的话，那可以用localStorage/sessionStorage 进行菜单数据缓存

reverland · 2017-03-22T10:06:54Z

@arzcl #3671

Ppsj · 2017-03-29T04:41:26Z

@erguotou520 你代码段的 $t 是什么。。求指教

Property or method "$t" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

erguotou520 · 2017-03-30T01:36:07Z

@Ppsj 国际化啊

baiyaaaaa · 2017-04-16T16:22:28Z

导致这个问题是因为你的数据是异步的，那么在这种情况下你应该在数据来的时候设置一次 default-openeds 。

arzcl · 2017-04-26T06:51:58Z

利用 NavMenu 组件的 default-openeds +select 事件 + sessionStorage 基本实现了我的需求，代码如下：

    这个是写在组件创建完后获取数据的方法里的
    // 每次载入路由的时候，都利用 sessionStorage 取值对 NavMenu  做展开处理
    if (sessionStorage.getItem('defaultOpeneds') !== null) {
          self.defaultOpeneds = [sessionStorage.getItem('defaultOpeneds')]
     }

select 事件

    handleSelect (key, keyPath) {
         // 利用 sessionStorage 储存当前点击的菜单组
        sessionStorage.setItem('defaultOpeneds', keyPath[0])
    }

如果有更好的方法，烦请告知下我，感谢！

prettyGirlH · 2017-05-17T07:22:40Z

@kouguopeng ,你的information数组中的数据，是不是直接写在data中的？

baijunjie · 2017-09-02T11:14:43Z

我是这样使一级菜单全部默认打开的

  <el-menu :default-active="$route.fullPath"
             :default-openeds="links.map(item => item.path)"
             router>
        <template v-for="(link, index) in links"
                  v-if="!link.hide && link.path">
            <el-submenu v-if="link.children && link.children.length"
                        :key="link.path"
                        :index="link.path">

                <template v-if="link.empty"
                          slot="title"
                          class="submenu-title">
                    <i :class="link.icon"></i>
                    <span v-text="$t(link.i18n)"></span>
                </template>
                <el-menu-item v-else
                              slot="title"
                              class="submenu-title"
                              :index="link.path">
                    <i :class="link.icon"></i>
                    <span v-text="$t(link.i18n)"></span>
                </el-menu-item>

                <el-menu-item v-for="(childLink, childIndex) in link.children"
                              v-if="!childLink.hide && childLink.path"
                              :key="childLink.path"
                              :index="childLink.path">
                    <i :class="childLink.icon"></i>
                    <span v-text="$t(childLink.i18n)"></span>
                </el-menu-item>
            </el-submenu>

            <el-menu-item v-else
                          :key="link.path"
                          :index="link.path">
                <i :class="link.icon"></i>
                <span v-text="$t(link.i18n)"></span>
            </el-menu-item>

        </template>
    </el-menu>

Jason19901023 · 2017-10-18T06:42:59Z

既然是异步获取菜单数据的原因，那么就在el-menu组件上面加上v-if指令进行判断就行。
比如可以设置menuList初始化为一个空数组，在el-menu组件上加上v-if="menuList.length>0"的判断，等菜单数据通过异步请求获取到的时候，el-menu组件就会进行渲染，这样子，设置了default-active也可以就可以正常高亮并展开菜单了。
我写了个简单的例子：https://jsfiddle.net/w340e5w9/1/

K-walker · 2018-03-05T02:40:01Z

@kouguopeng 我很想问一下，通过for去动态渲染菜单，一般我们的菜单数据都是树形结构的，不用递归的话，怎么能够一层一层往下渲染呢，我看你贴的代码，知道了第二层级，如果第二层级下面还有children你怎么渲染出来呢，你这样只能渲染出2层的菜单啊

Ruloce · 2024-04-26T07:37:03Z

既然是异步获取菜单数据的原因，那么就在el-menu组件上面加上v-if指令进行判断就行。比如可以设置menuList初始化为一个空数组，在el-menu组件上加上v-if="menuList.length>0"的判断，等菜单数据通过异步请求获取到的时候，el-menu组件就会进行渲染，这样子，设置了default-active也可以就可以正常高亮并展开菜单了。我写了个简单的例子：https://jsfiddle.net/w340e5w9/1/

这是有用的，感谢帮助

reverland added a commit to reverland/element that referenced this issue Mar 22, 2017

ElMenu: update openedMenus when items changes, fix ElemeFE#2670

25667b3

gabrielboliveira mentioned this issue Apr 12, 2017

[Bug Report] Menu binding to defaultActive don't update at beginning #4048

Closed

baiyaaaaa closed this as completed Apr 16, 2017

baiyaaaaa mentioned this issue May 31, 2017

ElMenu: update activedIndex/openedMenus when items changes, fix #2670 #3671

Closed

NavMenu使用了for渲染后，无法正常展开菜单 #2670

NavMenu使用了for渲染后，无法正常展开菜单 #2670

Comments

arzcl commented Feb 5, 2017 • edited

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017 • edited

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017

arzcl commented Feb 7, 2017

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017

erguotou520 commented Feb 7, 2017 • edited

arzcl commented Feb 7, 2017

erguotou520 commented Feb 7, 2017

arzcl commented Feb 7, 2017

forzalianjunting commented Feb 9, 2017

ckken commented Feb 23, 2017

uojo commented Mar 1, 2017

my9074 commented Mar 2, 2017

baimiaolei commented Mar 9, 2017

kouguopeng commented Mar 10, 2017 • edited

reverland commented Mar 22, 2017

arzcl commented Mar 22, 2017

reverland commented Mar 22, 2017

Ppsj commented Mar 29, 2017 • edited

erguotou520 commented Mar 30, 2017

baiyaaaaa commented Apr 16, 2017

arzcl commented Apr 26, 2017

prettyGirlH commented May 17, 2017

baijunjie commented Sep 2, 2017

Jason19901023 commented Oct 18, 2017

K-walker commented Mar 5, 2018

Ruloce commented Apr 26, 2024

arzcl commented Feb 5, 2017 •

edited

arzcl commented Feb 7, 2017 •

edited

erguotou520 commented Feb 7, 2017 •

edited

kouguopeng commented Mar 10, 2017 •

edited

Ppsj commented Mar 29, 2017 •

edited