问题描述:当点击页面中的按钮想要改变菜单的选中项时,往往最想想到的是改变active-name和open-names中的值,但是直接改变这两个值并不能直接生效,有兴趣的可以打印下菜单的属性,会发现其实是已经改变了选中的选项,但是页面没有给与更新,所以我们需要用到iview菜单中提供的updateActiveName和updataOpened来进行实现。
1.首先我们需要一个写好的菜单栏,主要注意的是ref的值,以及操作菜单选项的值active-name和open-names的值。(注:本方法采用的是父子组件的形式实现的,同一个页面间不需要第二步,只需监听open-names的值即可)
<Menu
:active-name="thisUrl"
:open-names="[thisTitle]"
:theme="theme"
width="auto"
ref="menus"
:accordion="true"
@on-select="mylcick"
>
<Submenu :name="itemb.title" v-for="(itemb, indexb) in Mdata" :key="indexb">
<template slot="title"> {{ itemb.title }}</template>
<!--二级菜单-->
<template v-for="(itemc, indexc) in itemb.child">
<MenuItem v-if="!itemc.child"
:key="indexc"
:name="itemc.url"
>{{ itemc.name }}</MenuItem>
<Submenu v-if="itemc.child&&itemc.child.length>0" :name="itemc.name" :key="'menuitem' + itemc.name">
<template slot="title">{{ itemc.name }}</template>
<template v-for="son in itemc.child">
<MenuItem :name="son.url" :key="'menuitem' + son.name">
<span class="layout-text" :key="'title' + son.name">{{ son.name }}</span>
</MenuItem>
</template>
</Submenu>
</template>
</Submenu>
</Menu>
2.设置接收父组件传参的值,并对这个值进行watch监听。
props: {
title:{//这个是父组件的值
type:String,
required: true
}
},
3.对值进行监听。
watch:{
title: {
handler(newName, oldName) {
this.watchRoute(newName)
}
}
},
4.调用watch监听事件中的方法,注意this.$refs
后面的值,要和菜单栏中的ref的值一样,并且this.thisTitle = newName;
要在this.$nextTick()
方法之前,不然无法生效。
watchRoute(newName) {
this.thisTitle = newName;
this.$nextTick(() => {
this.$refs.meuns.updateActiveName()
this.$refs.meuns.updateOpened();
});
},
以上就是手动打开某一个菜单选项的实现过程,如果觉得有用请多多关注点赞,博主会分享自己使用的过程中遇到的难点问题,大家共同进步!
附:页面所需的数据二级菜单数据以及方法
data() {
return {
theme: "dark",
thisUrl: "",
thisTitle: "",
Mdata: [
{
title: "区块链信息管理",
child: [
{name: "主子链信息", url: "/BApplicationChain"},
{name: "节点信息", url: "/CNodeInformation"},
{name: "命名规则", url: "/ANamingRules"}
]
},
{
title: "应用链业务备案",
child: [
{name: "存证业务", url: "/ADepositBusiness"},
{name: "智能合约", url: "/BIntelligentContract"}
]
},
{
title: "智能安全监管",
child: [
{name: "训练模型管理", url: "/ATrainingModel"},
{name: "训练数据管理", url: "/BTrainingData"},
{name: "监管策略管理", url: "/CRegulatoryPolicy"},
{name: "监管异常处理", url: "/DAbnormalDisposal"}
]
},
{
title: "系统日志审计",
child: [
{name: "主链用户日志", url: "/ALogBrowsing"},
{name: "子链业务日志", url: "/BDataServiceLog"},
{name: "展示模板管理", url: "/Visualtemplate"}
]
},
{
title: "平台用户管理",
child: [
{name: "主链用户", url: "/BRegistrationManagement"},
{name: "子链用户", url: "/ApplicationChain"},
{name: "跨链授权", url: "/CAuthorizationManagement"}]
]
};
},
beforeMount() {
let menuArr = [];
var flatten = (items) => {
if (items && items.child) {
menuArr = menuArr.concat(items.child);
items.child.forEach(i => {
i.pTitle = items.text || items.title || '';
flatten(i);
})
}
}
this.Mdata.forEach(i => {
flatten(i);
})
if (this.$route.path != '/') {
this.thisUrl = this.$route.path;
let cMenu = _.find(menuArr, {url: this.thisUrl}) || {};
this.thisTitle = cMenu.pTitle;
} else {
this.thisUrl = this.Mdata[0].child[0].child[0].url;
this.thisTitle = this.Mdata[0].child[0].title;
}
},
mylcick(url) {//这个放到methods中
if (this.thisUrl == url) {
return;
}
this.$router.push(url);
this.thisUrl = url;
}