1、顶栏
导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。
在菜单中通过submenu组件可以生成二级菜单。
<tamplate><div><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><!-- select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path--><el-submenu index="1"><template slot="title">水果</template><el-menu-item index="1-1">草莓</el-menu-item><el-menu-item index="1-2">芒果</el-menu-item><el-menu-item index="1-3">哈密瓜</el-menu-item><el-menu-item index="1-4">西瓜</el-menu-item><el-menu-item index="1-5">葡萄</el-menu-item></el-submenu><el-submenu index="2"><template slot="title">蔬菜</template><el-menu-item index="2-1">青菜</el-menu-item><el-menu-item index="2-2">油麦菜</el-menu-item><el-menu-item index="2-3">菠菜</el-menu-item><el-menu-item index="2-4">空心菜</el-menu-item></el-submenu><el-submenu index="3"><template slot="title">饮料</template><el-submenu index="3-1"><template slot="title">可乐</template><el-menu-item index="3-1-1">小</el-menu-item><el-menu-item index="3-1-2">中</el-menu-item><el-menu-item index="3-1-3">大</el-menu-item></el-submenu><el-menu-item index="3-2">玉米汁</el-menu-item><el-menu-item index="3-3">西瓜汁</el-menu-item><el-menu-item index="3-4">橙汁</el-menu-item></el-submenu><el-menu-item index="4">消息中心</el-menu-item><el-menu-item index="5">订单管理</el-menu-item></el-menu></div></template>
export default {data() {return {activeIndex: '1',};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}}
如图:
Menu 还提供了background-color(菜单的背景色)
text-color(菜单的文字颜色)
active-text-color(当前激活菜单的文字颜色)
el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title">水果</template><el-menu-item index="1-1">草莓</el-menu-item><el-menu-item index="1-2">芒果</el-menu-item><el-menu-item index="1-3">哈密瓜</el-menu-item><el-menu-item index="1-4">西瓜</el-menu-item><el-menu-item index="1-5">葡萄</el-menu-item></el-submenu><el-submenu index="2"><template slot="title">蔬菜</template><el-menu-item index="2-1">青菜</el-menu-item><el-menu-item index="2-2">油麦菜</el-menu-item><el-menu-item index="2-3">菠菜</el-menu-item><el-menu-item index="2-4">空心菜</el-menu-item></el-submenu><el-submenu index="3"><template slot="title">饮料</template><el-submenu index="3-1"><template slot="title">可乐</template><el-menu-item index="3-1-1">小</el-menu-item><el-menu-item index="3-1-2">中</el-menu-item><el-menu-item index="3-1-3">大</el-menu-item></el-submenu><el-menu-item index="3-2">玉米汁</el-menu-item><el-menu-item index="3-3">西瓜汁</el-menu-item><el-menu-item index="3-4">橙汁</el-menu-item></el-submenu><el-menu-item index="4">消息中心</el-menu-item><el-menu-item index="5">订单管理</el-menu-item></el-menu>
如图:
2、侧栏
<el-row class="tac"><el-col :span="12"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><!-- opensub-menu 展开的回调 index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index pathclosesub-menu 收起的回调index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path --><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"><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>
如图:
3、折叠
<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-row class="tac"><el-col :span="12"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"><!-- opensub-menu 展开的回调 index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index pathclosesub-menu 收起的回调index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path --><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"><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 {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}</script>
如图: