Element UI三十七NavMenu导航菜单

简介

• el-menu：该组件为网站提供导航功能的菜单。其属性表入下，

• 
  
  

• el-submenu:子菜单，其属性表如下，

• 

• el-menu-item:菜单项，其属性入下，

• 

• el-menu-group:为菜单分组，其属性表如下，

• 

顶栏

• 通过mode属性可将导航菜单设置为水平模式，默认垂直。使用el-submenu组件可生成二级菜单。通过background-color、text-color和active-text-color属性可分别设置菜单的背景色、文字颜色和当前激活菜单的文字颜色。通过default-active设置默认激活的菜单。通过disabled属性可禁用某菜单项。下例为一个适用广泛的基础示例：

        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4">
                <!--target属性指定链接在何处显示（是在新窗口还是原窗口），
                以下在新窗口打开，默认原窗口-->
                <a href="https://www.ele.me" target="_blank">订单管理</a>
            </el-menu-item>
        </el-menu>
            <div></div>
            <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect"
                     background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4">
                    <!--target属性指定链接在何处显示（是在新窗口还是原窗口），
                    以下在新窗口打开，默认原窗口-->
                    <a href="https://www.ele.me" target="_blank">订单管理</a>
                </el-menu-item>
            </el-menu>
            
<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
        //自动传入菜单项的index和选中菜单项的indexPath
        handleSelect(index,indexPath){
            console.log(index,indexPath);
        }
    }
  }
</script>

侧栏

• 使用el-menu-item-group组件可实现菜单分组，分组名可通过title属性或子组件的slot属性设置。
• 

折叠

• 通过collapse属性可将菜单收起。

• 

• 官方文档

• 代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”

标签：选项,el,菜单,menu,Element,UI,菜单项,NavMenu,属性
来源： https://blog.csdn.net/jiachunchun/article/details/110275499