iview菜单（Menu）和选项卡（Tabs）的组合应用
前提
本人学习iview阶段，组合应用的前提要掌握vue，vue-router等基础，本次项目利用的是router-link和router-view进行的操作，才可实现。
最后成果
相对于一些管理系统等，都会有着一定的帮助。
总体流程
创建layout布局
将所有router组件进行注册
进行编码
<template>
<Layout class="layout" :style="{minHeight: '100vh'}">
<Sider style="z-index: 5;" width="240" collapsible :collapsed-width="120" v-model="isCollapsed">
<Menu :class="menuitemClasses" active-name="1-1" width="auto" :theme="dark" accordion @on-select="menuSelect" @test='menuSelect' :style="{height:mainHeight+'px'}">
<Submenu v-for="item in menuData" :name="item.name" :key="item.name">
<template slot="title">
<Icon type="ios-analytics"></Icon><span>{{item.label}} </span>
</template>
<MenuItem v-for="mi in item.menuitems" :name="mi.name" :key="mi.name">
<Icon type="ios-navigate"></Icon>
<span>{{mi.label}}</span>
</MenuItem>
</Submenu>
</Menu>
<!-- <Tree :data="baseData" show-checkbox></Tree> -->
</Sider>
<Layout>
<Content style="height: 859px;">
<Tabs type="card" @on-tab-remove="removeTab" @on-click="clickTab" :animated="false" :value="activeTab">
<template v-for="(item,index) in mainTabs" >
<TabPane :key="item.name" :label="item.label" closable :name="item.url" v-if="item.show">
</TabPane>
</template>
<router-view width="100%" :height="frameHeight"></router-view>
` </Tabs>
</Content>
</Layout>
</Layout>
</template>
<script>
export default{
data(){
return{
isCollapsed:false,
baseData: [{
expand: true,
title: 'parent 1',
children: [{
title: 'parent 1-0',
expand: true,
disabled: true,
children: [{
title: 'leaf',
disableCheckbox: true
}, {
title: 'leaf',
}]
}, {
title: 'parent 1-1',
expand: true,
checked: true,
children: [{
title: '<span style="color: red">leaf</span>',
}]
}]
}],
menuData:[
{ label:'系统管理',name:"m1",
menuitems:[
{name:'m1-1',label:'用户管理',url:'/user'}
]
},
{ label:'车主秘书',name:"m2",
menuitems:[
{name:'m2-1',label:'车主秘书业务管理',url:'/secretary'}
]
},
{ label:'新车牌照批改',name:"m3",
menuitems:[
{name:'m3-1',label:'新车牌照批改业务管理',url:'/newLicenseActing'},
{name:'m3-2',label:'新车牌照批改业务处理',url:'/newLicenseBusiness'}
]
},
{ label:'酒后代驾',name:"m4",
menuitems:[
{name:'m4-1',label:'酒后代驾业务管理',url:'/substituteDrivingActing'},
{name:'m4-2',label:'酒后代驾业务处理',url:'/substituteDrivingBusiness'}
]
},
{ label:'代检车',name:"m5",
menuitems:[
{name:'m5-1',label:'代检车业务管理',url:'/vehiclemanagementActing'},
{name:'m5-2',label:'代检车业务处理',url:'/vehicleinspectionBusiness'}
]
},
{
label:'日程表',name:'m6',
menuitems:[
{name:'m6-1',label:'日程表管理',url:'/calendar'}
]
}
],
activeTab:null,
mainHeight: 0,
frameHeight: 0,
mainTabs:[],
dark:"dark"
}
},
computed: {
menuitemClasses: function () {
return [
'menu-item',
this.isCollapsed ? 'collapsed-menu' : ''
]
}
},
mounted:function(){
this.setFrameHeight();
},
methods:{
menuSelect:function(name){
var tab = this.getTab(name);
if(tab==null){
var mi = this.getMenuItem(name);
mi["show"] = true;
this.mainTabs.push(mi);
}
else{
tab.show=true;
}
var qqq = this.getMenuItem(name);
this.$router.push(qqq.url);
this.activeTab=name;
},
getTab:function(name){
for(var i=0; i<this.mainTabs.length; i++){
if(this.mainTabs[i].name==name)return this.mainTabs[i];
}
return null;//没有找到
},
removeTab:function (name) {
for(let i = 0;i<this.mainTabs.length;i++){
if(this.mainTabs[i].url==name){
this.mainTabs.splice(i, 1);
}
}
console.log(this.mainTabs)
if(this.mainTabs.length==0){
this.$router.push("/welcome")
}else{
this.$router.back(-1)
}
},
clickTab:function(name){
this.$router.push(name);
var vm=this;
vm.frameHeight -= 1;
},
getMenuItem:function(name){
for(var sm=0; sm<this.menuData.length; sm++){
for(var mi=0; mi<this.menuData[sm].menuitems.length; mi++){
if(this.menuData[sm].menuitems[mi].name==name)
return this.menuData[sm].menuitems[mi];
}
}
return {};//这个应该不可能发生
},
onAuthor:function(){
this.$Message.info("wallimn，http://wallimn.iteyey.com");
},
setFrameHeight:function(){
//调整掉一些补白的值
this.mainHeight = (document.documentElement.scrollHeight || document.body.scrollHeight)-90-90;
this.frameHeight = this.mainHeight-90;
}
},
created(){
if(this.mainTabs.length==0){
this.$router.push("/welcome")
}
}
}
</script>
<style>
.layout-con{
height: 100%;
width: 100%;
}
.menu-item span{
display: inline-block;
overflow: hidden;
/* width: 69px; */
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
transition: width .2s ease .2s;
}
.menu-item i{
transform: translateX(0px);
transition: font-size .2s ease, transform .2s ease;
vertical-align: middle;
font-size: 16px;
}
.collapsed-menu span{
width: 0px;
transition: width .2s ease;
}
.collapsed-menu i{
transform: translateX(5px);
transition: font-size .2s ease .2s, transform .2s ease .2s;
vertical-align: middle;
font-size: 22px;
}
</style>
总结
本次学习iview，进行的前台页面编写，可直接拿来进行后台链接，中间也踩了很多控件的坑，感触良多，使我对vue、iview的理解更深刻，router进行的路由跳转的三种方式。本次采用的是vue双向绑定机制，循环遍历菜单和选项卡，进行一个router-view多次进行跳转，返回上一级和判断是否为空显示首页欢迎页面。
小弟学习iview阶段所编写，也参照了其他大佬们所编写的文章。
以上全是小弟的项目心得，希望各位大大多多照顾。
来源：CSDN
作者：春风十里q
链接：https://blog.csdn.net/weixin_43890267/article/details/90690641