管理系统项目中的page页面组件整理

本文主要介绍了在管理系统项目中,如何整理和使用page页面组件。包括rootPage的构建,搜索模块组件的设计,以及table组件的实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
       
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值