Iview: <Menu>组件动态open-names无效

[chenhaizano]

iView 版本号

2.0.0-rc.10

操作系统/浏览器 版本号

Win7/Chrome 56

Vue 版本号

2.2.2

问题现象，以及你期望的结果是怎样的?

问题一

<Menu ref="menu" theme="dark" width="auto" accordion @on-select="select" :active-name="active" :open-names="openNames">

动态更新open-names无效，即：

:open-names="openNames"，更新openNames时，不更新菜单视图的展开关闭的状态。

问题二

然后我通过调用 updateOpened 方法来更新菜单视图的状态，出现一个问题，就是如果是开启手风琴模式（accordion=true），会出现之前展开的现在不关闭。

这里建议修改updateOpened里的方法，判断是开启accordion的，不在openNames数组内的就关闭展开

updateOpened () {
const items = findComponentsDownward(this, 'Submenu');
if (items.length) {
items.forEach(item => {
if (this.openNames.indexOf(item.name) > -1) item.opened = true;
});
}
}

为

updateOpened () {
const items = findComponentsDownward(this, 'Submenu');
if (items.length) {
items.forEach(item => {
if (this.openNames.indexOf(item.name) > -1) {
item.opened = true
} else if(this.accordion) {
item.opened = false
}
});
}
}

你估计可能的原因是什么（选填）？

开启了路由缓存

<keep-alive> <router-view></router-view> </keep-alive>

Menu 组件不是每次都离开都销毁

不像官网文档，每次Menu组件都create、destroyed

[chenhaizano]

最后通过这样临时解决

watch : {
openNames () {
this.$refs.menu.$children.forEach((item) => {
item.opened = false
})
this.$nextTick(() => {
this.$refs.menu.updateOpened()
})
}
}

[SUGE2016]

这个问题很容易复现，<Menu>放到router-view标签外面就可以了，否则Menu每次都刷新可以正常显示opened状态。

/src/components/menu/menu.vue 中

watch: {
            openNames () {
                this.$emit('on-open-change', this.openNames);
            },

• 外部修改open-names属性时可以触发on-open-change事件, 但是没有处理这个事件
• 解决方法有两个:

1

在<Menu>上 @on-open-change并在响应方法中 this.nextTick 中调用menu.updateOpened

2 这个方法需要自己fork分支并修改

在mounted方法中作如下修改,on-open-change时调用updateOpened

mounted () {
            this.updateActiveName();
            this.updateOpened();
            this.$on('on-open-change', (names) => {
                this.updateOpened();
            });

[Licoy]

我也遇到了这个问题，每次调用点击子菜单就会导致父菜单关闭，现在我的临时解决办法是：

this.$refs.sideMenu.$children.forEach((item) => {
            this.openNames.forEach(e=>{
                if(e==item.name){
                    item.opened = true;
                }
            })
        })