Api

el-menu

基础用法



Element



处理中心
我的工作台
订单管理











1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="nav">
  <h1>Element</h1>
  <el-menu active-key="1">
    <el-menu-item key="1">处理中心</el-menu-item>
    <el-menu-item key="2">我的工作台</el-menu-item>
    <el-menu-item key="3">订单管理</el-menu-item>
  </el-menu>
  <div class="nav-right">
    <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
    <span class="nav__button is-unread">
      <i class="el-icon-message"></i>
    </span>
    <span class="nav__button">
      <i class="el-icon-setting"></i>
    </span>
  </div>
</div>


Element



处理中心
我的工作台
订单管理











1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="nav nav-dark">
  <h1>Element</h1>
  <el-menu theme="dark" active-key="1">
    <el-menu-item key="1">处理中心</el-menu-item>
    <el-menu-item key="2">我的工作台</el-menu-item>
    <el-menu-item key="3">订单管理</el-menu-item>
  </el-menu>
  <div class="nav-right">
    <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
    <span class="nav__button is-unread">
      <i class="el-icon-message"></i>
    </span>
    <span class="nav__button">
      <i class="el-icon-setting"></i>
    </span>
  </div>
</div>

侧边栏导航



Element



导航一


选项1
选项2
选项3



选项1
选项2
选项3



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="nav nav-vertical">
  <h1>Element</h1>
  <el-menu mode="vertical" active-key="2-1">
    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
    <el-submenu key="sub1">
      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
      <el-menu-item key="2-1">选项1</el-menu-item>
      <el-menu-item key="2-2">选项2</el-menu-item>
      <el-menu-item key="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu key="sub2">
      <template slot="title"><i class="el-icon-setting"></i>导航三</template>
      <el-menu-item key="3-1">选项1</el-menu-item>
      <el-menu-item key="3-2">选项2</el-menu-item>
      <el-menu-item key="3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</div>


Element



导航一


选项1
选项2
选项3



选项1
选项2
选项3



选项1
选项2
选项3



选项1
选项2
选项3



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="nav nav-vertical nav-dark">
  <h1>Element</h1>
  <el-menu mode="vertical" theme="dark" active-key="3-1">
    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
    <el-submenu key="sub1">
      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
      <el-menu-item key="2-1">选项1</el-menu-item>
      <el-menu-item key="2-2">选项2</el-menu-item>
      <el-menu-item key="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu key="sub2">
      <template slot="title"><i class="el-icon-setting"></i>导航三</template>
      <el-menu-item key="3-1">选项1</el-menu-item>
      <el-menu-item key="3-2">选项2</el-menu-item>
      <el-menu-item key="3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</div>
参数 说明 类型 可选值 默认值
mode 模式 string horizontal,vertical horizontal
theme 主题色 string light,dark light
activeKey 当前激活菜单的 key string
openedKeys 当前打开的submenu的 key 数组 Array
uniqueOpend 是否只保持一个子菜单的展开 boolean true, false false
router 是否使用 vue-router 的模式，启用该模式会在 select 事件触发时执行 this.$route.$router.go(key) 进行路由跳转 boolean true, false false
select 菜单激活回调 function(key, keyPath)
open SubMenu 展开的回调 function(key, keyPath)
close SubMenu 收起的回调 function(key, keyPath)
参数 说明 类型 可选值 默认值
key 唯一标志 string
参数 说明 类型 可选值 默认值
key 唯一标志 string