element ui如何修改NavMenu 导航菜单里面sidebar-item
时间: 2023-07-19 12:25:25 浏览: 124
修改elementUI的样式
要修改 `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-submenu 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-submenu>
<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: 'SidebarMenu',
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>
```
阅读全文