element组件：点击侧边栏，切换右侧内容

最新推荐文章于 2024-11-13 10:55:39 发布

qq_39389646

最新推荐文章于 2024-11-13 10:55:39 发布

阅读量7k

点赞数 2

分类专栏： Element 文章标签：点击侧边栏，切换右侧内容 element组件侧边栏左侧下拉菜单

本文链接：https://blog.csdn.net/qq_39389646/article/details/101125678

版权

Element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

侧边栏，远程加载了页面的头部

<template>
    <div>
        <Head></Head>
        <div class="menuMain" style="width: 20%;float: left">
            <el-container>
                <el-menu default-active="2" class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i><strong>信息管理</strong></template>
                        <a href="" style="text-decoration:none;"><el-menu-item index="1-1">老人档案</el-menu-item></a>
                        <div style="height:1px; background:#fff;"></div>
                        <a href="" style="text-decoration:none;"><el-menu-item index="1-2">机构信息</el-menu-item></a>
                        <div style="height:1px; background:#fff;"></div>
                        <a href="" style="text-decoration:none;"><el-menu-item index="1-3">服务人员信息</el-menu-item></a>
                    </el-submenu>
                    <div style="height:2px; background:#fff;"></div>
                              <el-submenu index="2">
                        <template slot="title"><i class="el-icon-message"></i><strong>派单管理</strong></template>
                        <el-menu-item index="2-1" @click='changeMain("orderInfo")'>订单查询</el-menu-item><!---->
                        <div style="height:1px; background:#fff;"></div>
                        <el-menu-item index="2-2" @click='changeMain("orderDistribute")'>订单派单</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-container>
        </div>
        <component :is="currentComponent"></component>
    </div>
</template>

<script>
    import head from './Head.vue'
    export default {
        inject:["reload"],
        data() {
            return{
                currentComponent:""
            }
        },
        components: {
            'Head':head, //将别名demo 变成 组件 Demo
            orderDistribute(resolve) {require(["./Order/orderDistribute.vue"], resolve); },
            orderInfo(resolve) {require(["./Order/orderInfo.vue"], resolve); },
        },
        methods:{
            changeMain:function(obj){
                this.currentComponent = obj;
            }
        }
    }
</script>

<style>
    .menuMain{
        padding-top: 10px;
    }
    .el-menu{
        width:100%;
        box-shadow: 3px 0px 2px #bababa
    }
    .el-submenu__title {
        background-color: rgba(197, 196, 203, 0.61);
        color: #333;
        line-height: 60px;
    }
    .el-submenu__title i{
        color: #000;
    }
    .el-submenu .el-menu-item{
        min-width: 0px;
    }
    .el-menu-item{
        background-color: rgba(233, 233, 233, 0.82);
    }
</style>

右侧内容

<template>
    <div class="orderDistribute" style="float: right;width: 78%">
    </div>
</template>