weixin_54060218
weixin_54060218
2021-03-23 10:12
采纳率: 50%
浏览 409

element里面的左侧导航栏怎么改变点击一级菜单展开后改变一级菜单的样式并且跳转到指定的页面?

vue element ui里面的左侧导航栏,我想要点击一级菜单让他在展开的时候改变被点击元素的样式,并且让他在展开的同时跳转到指定的页面,

<template>
    <div class='sidebar' id="side">
        <el-menu
            class='sidebar-el-menu'
            :default-active='items.active'
            :collapse='collapse'
            text-color='#ffffff'
            active-text-color='#ffffff'
            background-color='transparent'
            unique-opened
            router
            @open="handleOpen" 
            @close="handleClose" 
            select='index'
        >
        
            <template v-for='item in items'>
                <template v-if='item.subs'>
                    <!-- 菜单 class="ts" -->
                    <el-submenu :index='item.index' :key='item.index' >
                        <template slot='title' >
                            <i :class='item.icon'></i>
                            <span slot='title' >{{ item.title }}</span>
                        </template>
                        <template v-for='subItem in item.subs'>
                            <!-- 子级菜单 -->
                            <el-submenu
                                v-if='subItem.subs'
                                :index='subItem.index'
                                :key='subItem.index'
                            >
                                <template slot='title'>{{ subItem.title }}</template>
                                <el-menu-item
                                    v-for='(threeItem,i) in subItem.subs'
                                    :key='i'
                                    :index='threeItem.index'
                                >{{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index='subItem.index'
                                :key='subItem.index'
                            >{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index='item.index' :key='item.index'>
                        <i :class='item.icon'></i>
                        <span slot='title'>{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
            <!-- <el-radio-group v-model="collapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';

export default {
    data() {
        return {
            collapse: false,
            items: [
                {
                    icon: 'el-icon-lx-home',
                    index: 'dashboard',
                    active:1,
                    title: '首页'
                },
                {
                    icon: 'el-icon-s-cooperation',
                    index: 'table',
                    active:3,
                    title: '管理',
                    subs: [{
                        index: 'office_center',
                        title: '办公',
                        active:2-1,
                    },
                        
                        {
                            index: 'meeting_management',
                            title: '管理模块'
                        },
                        {
                            index: 'office_assets',
                            title: '资产管理'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-recharge',
                    index: 'financial_management',
                    active:3,
                    title: '财务管理',
                    subs: [{
                        index: 'budget_management',
                        title: '预算管理',
                      

                    },
                        {
                            index: 'revenue_management',
                            title: '收入管理',
                           
                        },
                        {
                            index: 'expenditure_management',
                            title: '支出管理',
                      
                        }
                       ]

                },
                {
                    icon: 'el-icon-s-flag',
                    index: 'clean_trading',
                    title: '交投',
                    subs: [
                        {
                            index: 'department_work_news',
                            title: '工作动态'
                        },
                        {
                            index: 'department_file_sharing',
                            title: '文件分享'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-copy',
                    index: 'party_culture',
                    title: '文化',
                    subs: [
                        {
                            index: 'party_organization_management',
                            title: '组织管理'
                        },
                        {
                            index: 'management_Party_members',
                            title: '人员管理'
                        },
                        
                    ]
                },
                
                
            ],
            
           
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }   
    },
    created() {
        // 通过 Event Bus 进行组件间通信,来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    },
    method: {
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      
    }
};
</script>

<style scoped>
.ts{
    background-color: orange !important;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
}
.el-submenu .el-menu-item {
    font-size: 15px;
    min-width:100px;
    
}

.el-submenu__title i {
    color: #ffffff;
    
}

.el-menu-item i {
    color: white;
    

}
.el-submenu__title * {
    font-size: 15px !important;
    font-family: "微软雅黑";
    
    }
.el-menu-item * {
    font-size: 15px;
    font-family: "微软雅黑";
    
}
.el-submenu{
    color: white !important;
    width: 100%;
    
}
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    width: 15.5%;
}
.el-icon-arrow-down:before{
    color: "#ffffff";
}
.el-menu-item.is-active {
    background-color: orange !important;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    opacity: 1;
    width: 180px;
    z-index: 0;
    left: 2px;
}

.sidebar > ul {
    height: 0%;
}
.collapse-btn {
    float: left;
    padding: 0 16px;
    cursor: pointer;
    line-height: 71px;
}
</style>

想要改变代码中管理的样式,点击管理后,会改变管理的背景样式,求大佬们帮帮忙,我实在时想不出方法了

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • alnorthword
    禅思院 2021-03-23 10:19
    已采纳

    1他在展开的时候改变被点击元素的样式,这个通过class 可以控制,官网组件有demo

    2展开的同时跳转到指定的页面,这个是vue-router中有个属性redirect(重定向),指定跳转的路由即可

    点赞 1 评论
  • alnorthword
    禅思院 2021-03-23 14:31

    选中的话 ,class 会有变动,通过修改样式处理

    点赞 评论
  • alnorthword
    禅思院 2021-03-24 09:46

    把第一个排除不就行啦

    点赞 评论
  • alnorthword
    禅思院 2021-03-24 09:52

    点赞 评论

相关推荐