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

原创

已于 2023-05-15 10:55:22 修改 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2023-05-15 10:47:31 首次发布

本文主要介绍了在管理系统项目中，如何整理和使用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>