element-ui使用导航菜单
时间: 2023-10-27 13:08:12 浏览: 71
element-ui使用导航菜单的方法是通过使用菜单组件实现的。在代码中,我们可以看到使用了element-ui的Menu组件来创建导航菜单。
具体的使用方法如下:
1. 首先,导入element-ui的Menu组件:import { Menu } from 'element-ui';
2. 在template中,使用Menu组件创建菜单。可以通过设置mode属性来决定菜单的展示方式(如水平菜单、垂直菜单等)。
3. 在Menu组件中,使用MenuItem组件来添加菜单项。可以通过设置index属性来指定每个菜单项的唯一标识。
4. 可以根据需求,添加其他属性来自定义菜单的样式和功能,如设置active-name属性来指定默认选中的菜单项。
下面是一个简单的示例代码:
```
<template>
<Menu mode="horizontal" :default-active="defaultActive">
<MenuItem index="1">菜单项1</MenuItem>
<MenuItem index="2">菜单项2</MenuItem>
<MenuItem index="3">菜单项3</MenuItem>
</Menu>
</template>
<script>
import { Menu, MenuItem } from 'element-ui';
export default {
name: 'YourComponentName',
components: {
Menu,
MenuItem
},
data() {
return {
defaultActive: '1', // 默认选中的菜单项
}
}
}
</script>
```