简介
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和选中菜单项的indexPathhandleSelect(index,indexPath){console.log(index,indexPath);}}}</script>
侧栏
使用el-menu-item-group组件可实现菜单分组,分组名可通过title属性或子组件的slot属性设置。折叠
通过collapse属性可将菜单收起。
官方文档
代码实例:“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”