1、页面rootPage
<template>
<div class="component-wrap">
<div class="component-header ui-panel-title">
<PageTitle :pageTitle="{title:'某管理'}">
<el-tooltip slot="header-right" class="ui-pull-right mouseHover" effect="dark" content="提示" placement="top-start">
<el-image src="../../../../static/img/hover.png" class="mouseHover"></el-image>
</el-tooltip>
</PageTitle>
<div class="tab-menu">
<el-menu :default-active="tabsActiveIndex" class="ui-tab-menu" @select="tabsSelect" mode="horizontal">
<el-menu-item index="1">菜单1</el-menu-item>
<el-menu-item index="2">菜单2</el-menu-item>
</el-menu>
</div>
</div>
<div class="component-content">
<keep-alive>
<component v-bind:is="activePage"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import PageTitle from 'src/components/common/PageTitle.vue';
import devlist from './devlist.vue';
import task from './task.vue';
export default {
components:{
PageTitle,
devlist,
task,
},
data() {
return {
tabsActiveIndex: '1',
activePage:"devlist"
}
},
mounted(){
//默认显示哪一个菜单
let activePage = this.$route.query.activePage || 1;
this.tabsSelect(activePage);
},
methods: {
tabsSelect(key) {
this.tabsActiveIndex = key+'';
//判断需要显示的动态组件
if(key == 1){
this.activePage = "devlist";
}else if(key == 2){
this.activePage = "task";
}
},
}
}
</script>
<style lang="less" scoped>
@import "~static/less/layout.less";
.mouseHover {
width: 20px;
height: 20px;
}
.ui-tab-menu{
.el-menu-item{
color: #999;
}
&>.el-menu-item.is-active{
background: #fff !important;
color: #1890FF!important;
}
&>.el-menu-item:hover{
background: #fff !important;
}
&>.el-menu-item{
padding: 0 25px;
}
}
</style>
2、搜索模块组件
<template>
<div>
<el-form class="searchBox" :inline="true" label-width="80px">
<el-form-item v-for="(item, inx) in parentComsConfigData.searchList" :key="inx" :label= "item.label">
<!-- SELECT -->
<el-select v-if="item.type==='select'" filterable v-model="item[item.model]" @change="handleEvent(parentComsConfigData.searchMethod, 'change')" :placeholder= item.placeholder clearable :style="{width:item.labelWidth +'px'}">
<el-option
v-for="optionItem in item.optionList"
:key="optionItem[item.optionKey]"
:label="optionItem[item.optionLabel]"
:value="optionItem[item.optionValue]">
</el-option>