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

超、凢脫俗 2022-12-03 11:30 689阅读 0赞

## 1、NavMenu 导航菜单 ##

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

#### 顶栏 ####

适用广泛的基础用法。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

> 导航菜单默认为垂直模式，通过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>

#### 侧栏 ####

垂直菜单，可内嵌子菜单。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]

> 通过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>

#### 折叠 ####

![20200903135923787.png_pic_center][]  
![20200903135934389.png_pic_center][]

<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 ####

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

#### Menu Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>open</td> 
   <td>展开指定的 sub-menu</td> 
   <td>index: 需要打开的 sub-menu 的 index</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>收起指定的 sub-menu</td> 
   <td>index: 需要收起的 sub-menu 的 index</td> 
  </tr> 
 </tbody> 
</table>

#### Menu Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>select</td> 
   <td>菜单激活回调</td> 
   <td>index: 选中菜单项的 index, indexPath: 选中菜单项的 index path</td> 
  </tr> 
  <tr> 
   <td>open</td> 
   <td>sub-menu 展开的回调</td> 
   <td>index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>sub-menu 收起的回调</td> 
   <td>index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path</td> 
  </tr> 
 </tbody> 
</table>

#### SubMenu Attribute ####

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

#### Menu-Item Attribute ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>唯一标志</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>route</td> 
   <td>Vue Router 路径对象</td> 
   <td>Object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Menu-Group Attribute ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>分组标题</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 2、Tabs 标签页 ##

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

#### 基础用法 ####

基础的、简洁的标签页。  
![20200903143318413.png_pic_center][]

> 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>

#### 选项卡样式 ####

选项卡样式的标签页。  
![20200903143525642.png_pic_center][]

> 只需要设置 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>

#### 卡片化 ####

卡片化的标签页。  
![20200903143747404.png_pic_center][]

> 将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 设置标签的位置。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]

> 标签一共有四个方向的设置 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 来实现自定义标签页的内容。  
![20200903144538548.png_pic_center][]

<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>

#### 动态增减标签页 ####

增减标签页按钮只能在选项卡样式的标签页下使用。  
![20200903145118892.png_pic_center][]

<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>

#### 自定义增加标签页触发器 ####

![20200903145551155.png_pic_center][]

<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 ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值，选中选项卡的 name</td> 
   <td>string</td> 
   <td>—</td> 
   <td>第一个选项卡的 name</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>风格类型</td> 
   <td>string</td> 
   <td>card/border-card</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>标签是否可关闭</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>addable</td> 
   <td>标签是否可增加</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>标签是否同时可增加和关闭</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>tab-position</td> 
   <td>选项卡所在位置</td> 
   <td>string</td> 
   <td>top/right/bottom/left</td> 
   <td>top</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>标签的宽度是否自撑开</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>before-leave</td> 
   <td>切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换</td> 
   <td>Function(activeName, oldActiveName)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Tabs Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tab-click</td> 
   <td>tab 被选中时触发</td> 
   <td>被选中的标签 tab 实例</td> 
  </tr> 
  <tr> 
   <td>tab-remove</td> 
   <td>点击 tab 移除按钮后触发</td> 
   <td>被删除的标签的 name</td> 
  </tr> 
  <tr> 
   <td>tab-add</td> 
   <td>点击 tabs 的新增按钮后触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>edit</td> 
   <td>点击 tabs 的新增按钮或 tab 被关闭后触发</td> 
   <td>(targetName, action)</td> 
  </tr> 
 </tbody> 
</table>

#### Tab-pane Attributes ####

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

## 3、Breadcrumb 面包屑 ##

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

#### 基础用法 ####

适用广泛的基础用法。  
![20200903151003515.png_pic_center][]

> 在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>

#### 图标分隔符 ####

![20200903151203710.png_pic_center][]

> 通过设置 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 ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>separator</td> 
   <td>分隔符</td> 
   <td>string</td> 
   <td>—</td> 
   <td>斜杠’/’</td> 
  </tr> 
  <tr> 
   <td>separator-class</td> 
   <td>图标分隔符 class</td> 
   <td>string</td> 
   <td>—</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

#### Breadcrumb Item Attributes ####

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

## 4、PageHeader 页头 ##

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

#### 基础 ####

![20200903151747438.png_pic_center][]

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

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>string</td> 
   <td>—</td> 
   <td>返回</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back</td> 
   <td>点击左侧区域触发</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Slots ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>标题内容</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>内容</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ce61620c67264407b3caee0a552c309e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/99a27cbb85004e5594bd66b9d9522fab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/e4d2c857b03a4933a5ed92220ce98b12.png
[20200903135923787.png_pic_center]: /images/20221123/8a91dfdca51648ee98c71ca3cef64966.png
[20200903135934389.png_pic_center]: /images/20221123/8ddaed9962d94a58b34fe914b4954ffc.png
[20200903143318413.png_pic_center]: /images/20221123/94d36c096e45452cba18b0a246b34665.png
[20200903143525642.png_pic_center]: /images/20221123/9aab64def8fc4fbd96f1aa2e3b96d541.png
[20200903143747404.png_pic_center]: /images/20221123/2dca8d702d1748dcb6d53e380acd66d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/0f21a64e92984b2a942baca7900c5a10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/b29637da30f1402abf44e28384cfd149.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/8292da8e777742869f1217ed408d1a77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/94c433af042c4dcd958334dd12946337.png
[20200903144538548.png_pic_center]: /images/20221123/ef019350844147fc9904a8512cdedbe4.png
[20200903145118892.png_pic_center]: /images/20221123/854a97adb5db44749fd2432611ec5e3a.png
[20200903145551155.png_pic_center]: /images/20221123/b0c39c8422864ac5ae12ee476ff8decf.png
[20200903151003515.png_pic_center]: /images/20221123/84cf67cc4b9146b6b77efe35c02e082c.png
[20200903151203710.png_pic_center]: /images/20221123/3a50453d5d5c49d787ae5876353fea3a.png
[20200903151747438.png_pic_center]: /images/20221123/25f52ceb38b4430c9be02ce570e6b6bd.png