vue elementUI使用tabs与导航栏联动
版权申诉
5星 · 超过95%的资源 145 浏览量
2021-01-21
12:21:39
上传
评论 1
收藏 35KB PDF 举报 
vue elementUI使用使用tabs与导航栏联动与导航栏联动
不使用tabs标签页时，点击导航菜单，router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应
的组件，这就需要使用tabs组件
在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-
color="#20a0ff" unique-opened router @select="addTab">
<!-- 一级菜单 -->
<template v-for="item in slidebarData" >
<el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
<template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>
<!-- 二级菜单 -->
<template v-for="itemChild in item.subs">
<el-submenu v-if="itemChild.subs && itemChild.subs.length" :index="itemChild.index" :key="itemChild.index" class="erji">
<template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.title}}</span></template>
<!-- 三级菜单 -->
<el-menu-item v-for="itemChild_Child in itemChild.subs" :index="itemChild_Child.index" :key="itemChild_Child.index">
<i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.title}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="itemChild.index" :key="itemChild.index"><i :class="itemChild.icon"></i><span slot="title">
{{itemChild.title}}</span></el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="item.index" :key="item.index"><i :class="item.icon"></i><span slot="title">{{item.title}}</span>
</el-menu-item>
</template>
</el-menu>
使用bus把路由信息传出
import bus from '../common/bus';
methods: {
addTab(key,keyPath) {
console.log(key,keyPath)
bus.$emit('navPath',keyPath)
}
},
在tabs.vue中接收
<template>
<div id="tabs">
<el-tabs type="card" v-model="tabsVal" @tab-remove="closeTab" @tab-click="tabclick">
<el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.title" :closable="item.closable" >
<component :is="item.component"></component>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import searchFor from '../page/ContentManagement/Class/searchFor.vue';
import bus from '../common/bus';
export default {
data() {
return {
inputVisible: false,
navPath: '',
tabsVal: "searchFor",
tabList: [
{
title: '热门搜索',
评论1
最新资源