要
修改 `
NavMenu` 导航
菜单里面 `sidebar-item`，需要按照以下步骤进行：
1. 在 `
NavMenu` 中找到需要
修改的 `sidebar-item`，确定其 `name` 属性。
2. 在你的代码中引入 `
NavMenu` 组件。
3. 使用 `$refs` 获取 `
NavMenu` 组件的实例。
4. 使用 `getItem()` 方法获取需要
修改的 `sidebar-item` 的实例。
5.
修改该实例的属性，例如 `title`，`icon` 等。
6. 调用 `updateOpened()` 方法更新
菜单。
以下是
修改 `
NavMenu` 导航
菜单里面 `sidebar-item` 的示例代码：
```
html
<template>
<div>
<el-
nav-
menu ref="
menu" :default-active="activeIndex" class="el-
menu-vertical-demo" @select="handleSelect">
<template v-for="(item, index) in
menuList">
<el-sub
menu v-if="item.children" :index="item.path" :key="index">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</template>
<el-
menu-item v-for="(child, i) in item.children" :index="child.path" :key="i">{{ child.title }}</el-
menu-item>
</el-sub
menu>
<el-
menu-item v-else :index="item.path" :key="index">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-
menu-item>
</template>
</el-
nav-
menu>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'Sidebar
Menu',
data() {
return {
activeIndex: '',
menuList: [
{
title: '首页',
path: '/',
icon: 'iconfont icon-home',
},
{
title: '文章',
path: '/article',
icon: 'iconfont icon-article',
children: [
{
title: '技术',
path: '/article/tech',
},
{
title: '生活',
path: '/article/life',
},
],
},
],
};
},
mounted() {
this.activeIndex = this.$route.path;
},
methods: {
handleSelect(index) {
this.activeIndex = index;
this.$router.push(index);
},
},
computed: {
...mapState(['
menu']),
},
watch: {
menu() {
this.$nextTick(() => {
// 获取需要
修改的 sidebar-item 实例
const sidebarItem = this.$refs.
menu.getItem('/article/tech');
//
修改该实例的属性
sidebarItem.title = '技术文章';
sidebarItem.icon = 'iconfont icon-tech';
// 更新
菜单
this.$refs.
menu.updateOpened();
});
},
},
};
</script>
```
6477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
