【Vue.js】Vue.js组件库Element中的导航菜单、标签页、面包屑和页头

1、NavMenu 导航菜单

为网站提供导航功能的菜单。

顶栏

适用广泛的基础用法。

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

<el-menu :default-active="activeIndex" class="el-menu-demo" 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"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> <div class="line"></div> <el-menu :default-active="activeIndex2" class="el-menu-demo" 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"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> <script> export default { data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script>

侧栏

垂直菜单，可内嵌子菜单。

通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。

<el-row class="tac"> <el-col :span="12"> <h5>默认颜色</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col> <el-col :span="12"> <h5>自定义颜色</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col> </el-row> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script>

折叠

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-button :label="false">展开</el-radio-button> <el-radio-button :label="true">收起</el-radio-button> </el-radio-group> <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <span slot="title">分组一</span> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <span slot="title">选项4</span> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> <style> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> <script> export default { data() { return { isCollapse: true }; }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script>

Menu Attribute

参数说明类型可选值默认值mode模式stringhorizontal / verticalverticalcollapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean—falsebackground-color菜单的背景色（仅支持 hex 格式）string—#fffffftext-color菜单的文字颜色（仅支持 hex 格式）string—#303133active-text-color当前激活菜单的文字颜色（仅支持 hex 格式）string—#409EFFdefault-active当前激活菜单的 indexstring——default-openeds当前打开的 sub-menu 的 index 的数组Array——unique-opened是否只保持一个子菜单的展开boolean—falsemenu-trigger子菜单打开的触发方式(只在 mode 为 horizontal 时有效)stringhover / clickhoverrouter是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转boolean—falsecollapse-transition是否开启折叠动画boolean—true

Menu Methods

方法名称说明参数open展开指定的 sub-menuindex: 需要打开的 sub-menu 的 indexclose收起指定的 sub-menuindex: 需要收起的 sub-menu 的 index

Menu Events

事件名称说明回调参数select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index pathopensub-menu 展开的回调index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index pathclosesub-menu 收起的回调index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

SubMenu Attribute

参数说明类型可选值默认值index唯一标志string/null—nullpopper-class弹出菜单的自定义类名string——show-timeout展开 sub-menu 的延时number—300hide-timeout收起 sub-menu 的延时number—300disabled是否禁用boolean—falsepopper-append-to-body是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性boolean—一级子菜单：true / 非一级子菜单：false

Menu-Item Attribute

参数说明类型可选值默认值index唯一标志string——routeVue Router 路径对象Object——disabled是否禁用boolean—false

Menu-Group Attribute

参数说明类型可选值默认值title分组标题string——

2、Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: 'second' }; }, methods: { handleClick(tab, event) { console.log(tab, event); } } }; </script>

选项卡样式

选项卡样式的标签页。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

<template> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: 'first' }; }, methods: { handleClick(tab, event) { console.log(tab, event); } } }; </script>

卡片化

卡片化的标签页。

将type设置为border-card。

<el-tabs type="border-card"> <el-tab-pane label="用户管理">用户管理</el-tab-pane> <el-tab-pane label="配置管理">配置管理</el-tab-pane> <el-tab-pane label="角色管理">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> </el-tabs>

位置

可以通过 tab-position 设置标签的位置。

标签一共有四个方向的设置 tabPosition=“left|right|top|bottom”

<template> <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"> <el-radio-button label="top">top</el-radio-button> <el-radio-button label="right">right</el-radio-button> <el-radio-button label="bottom">bottom</el-radio-button> <el-radio-button label="left">left</el-radio-button> </el-radio-group> <el-tabs :tab-position="tabPosition" style="height: 200px;"> <el-tab-pane label="用户管理">用户管理</el-tab-pane> <el-tab-pane label="配置管理">配置管理</el-tab-pane> <el-tab-pane label="角色管理">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { tabPosition: 'left' }; } }; </script>

自定义标签页

可以通过具名 slot 来实现自定义标签页的内容。

<el-tabs type="border-card"> <el-tab-pane> <span slot="label"><i class="el-icon-date"></i> 我的行程</span> 我的行程 </el-tab-pane> <el-tab-pane label="消息中心">消息中心</el-tab-pane> <el-tab-pane label="角色管理">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> </el-tabs>

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用。

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name" > {{item.content}} </el-tab-pane> </el-tabs> <script> export default { data() { return { editableTabsValue: '2', editableTabs: [{ title: 'Tab 1', name: '1', content: 'Tab 1 content' }, { title: 'Tab 2', name: '2', content: 'Tab 2 content' }], tabIndex: 2 } }, methods: { handleTabsEdit(targetName, action) { if (action === 'add') { let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: 'New Tab', name: newTabName, content: 'New Tab content' }); this.editableTabsValue = newTabName; } if (action === 'remove') { let tabs = this.editableTabs; let activeName = this.editableTabsValue; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.editableTabsValue = activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); } } } } </script>

自定义增加标签页触发器

<div style="margin-bottom: 20px;"> <el-button size="small" @click="addTab(editableTabsValue)" > add tab </el-button> </div> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"> <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name" > {{item.content}} </el-tab-pane> </el-tabs> <script> export default { data() { return { editableTabsValue: '2', editableTabs: [{ title: 'Tab 1', name: '1', content: 'Tab 1 content' }, { title: 'Tab 2', name: '2', content: 'Tab 2 content' }], tabIndex: 2 } }, methods: { addTab(targetName) { let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: 'New Tab', name: newTabName, content: 'New Tab content' }); this.editableTabsValue = newTabName; }, removeTab(targetName) { let tabs = this.editableTabs; let activeName = this.editableTabsValue; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.editableTabsValue = activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); } } } </script>

Tabs Attributes

参数说明类型可选值默认值value / v-model绑定值，选中选项卡的 namestring—第一个选项卡的 nametype风格类型stringcard/border-card—closable标签是否可关闭boolean—falseaddable标签是否可增加boolean—falseeditable标签是否同时可增加和关闭boolean—falsetab-position选项卡所在位置stringtop/right/bottom/lefttopstretch标签的宽度是否自撑开boolean-falsebefore-leave切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换Function(activeName, oldActiveName)——

Tabs Events

事件名称说明回调参数tab-clicktab 被选中时触发被选中的标签 tab 实例tab-remove点击 tab 移除按钮后触发被删除的标签的 nametab-add点击 tabs 的新增按钮后触发—edit点击 tabs 的新增按钮或 tab 被关闭后触发(targetName, action)

Tab-pane Attributes

参数说明类型可选值默认值label选项卡标题string——disabled是否禁用boolean—falsename与选项卡绑定值 value 对应的标识符，表示选项卡别名string—该选项卡在选项卡列表中的顺序值，如第一个选项卡则为’1’closable标签是否可关闭boolean—falselazy标签是否延迟渲染boolean—false

3、Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

基础用法

适用广泛的基础用法。

在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认为斜杠/。

<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> <el-breadcrumb-item>活动列表</el-breadcrumb-item> <el-breadcrumb-item>活动详情</el-breadcrumb-item> </el-breadcrumb>

图标分隔符

通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 设置失效。

<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>活动管理</el-breadcrumb-item> <el-breadcrumb-item>活动列表</el-breadcrumb-item> <el-breadcrumb-item>活动详情</el-breadcrumb-item> </el-breadcrumb>

Breadcrumb Attributes

参数说明类型可选值默认值separator分隔符string—斜杠’/’separator-class图标分隔符 classstring—-

Breadcrumb Item Attributes

参数说明类型可选值默认值to路由跳转对象，同 vue-router 的 tostring/object——replace在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录boolean—false

4、PageHeader 页头

如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。

基础

<el-page-header @back="goBack" content="详情页面"> </el-page-header> <script> export default { methods: { goBack() { console.log('go back'); } } } </script>

Attributes

参数说明类型可选值默认值title标题string—返回content内容string——

Events

事件名称说明回调参数back点击左侧区域触发—

Slots

事件名称说明title标题内容content内容