vue根据定义data的变量修改elementui 导航二级菜单样式解决适配一级菜单宽度问题

拼搏现实的明天。 2022-09-15 11:57 223阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATzNvaG4_size_20_color_FFFFFF_t_70_g_se_x_16][]

在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示，因为elementui导航样式默认最小宽度200px，源码如下：

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
        min-width: 200px;
    }

需要动态改变min-width的值。

# 解决： #

*  导航点击事件：在点击展开菜单@open事件中判断展开导航的index,根据不同的导航赋值不同的width。
 *  CSS设置：一开始考虑通过css动态改变样式的方法，给变量赋值 this.$el.style.setProperty("--width",this.width);但是由于elementui菜单的二级菜单脱离文档流，不在el里修改样式所以采取

let element = document.querySelector(".el-menu--popup")
    element.style.width = this.width

# 代码： #

<template>
    	<div class="container">
    		
    		<div class="top-main">
    			<el-row >
    				<el-col class="menu-item" :xs="18" :sm="18" :md="18" :lg="18" :xl="19">
    					<el-menu 
    					ref="menu"
    					:default-active="activeIndex" 
    					mode="horizontal" 
    					:router="true"
    					menu-trigger="click"
    					:unique-opened="true" //设置点击显示子菜单时控制只展开一个子菜单
    					@open="open"
    					>
    						<el-menu-item index="/dataSource">
    							<template>
    								<span>数据源管理</span>
    							</template>
    						</el-menu-item>
    						
    						<el-submenu index="/assetCatalogueManag" >
    							<template slot="title">资产管理</template>
    							<el-menu-item index="/assetCatalogueManag">资产目录管理</el-menu-item>
    							<el-menu-item index="/dataTable">数据资产管理</el-menu-item>
    						</el-submenu>
    						<el-submenu index="/dataMarket">
    							<template slot="title">数据超市管理</template>
    							<el-menu-item index="/dataMarket">API目录管理</el-menu-item>
    							<el-menu-item index="/dataAPI">API管理</el-menu-item>
    						</el-submenu>
    						<el-menu-item index="/dicType">
    							<template>
    								<span>字典管理</span>
    							</template>
    						</el-menu-item>
    						<el-menu-item index="/userRole" v-if="sys_user_view">
    							<template>
    								<span>权限管理</span>
    							</template>
    						</el-menu-item>
    						
    						<el-menu-item index="/dataAuth">
    							<template>
    								<span>审批管理</span>
    							</template>
    						</el-menu-item>
    						
    						<el-menu-item index="/systemConfig">
    							<template>
    								<span>系统配置</span>
    							</template>
    						</el-menu-item>
    					</el-menu>
    				</el-col>
    			</el-row>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				activeIndex: '/assetCatalogueManag'
    			}
    		},
    		methods: {
    			initMenuActive(routePath) {
    				this.activeIndex = routePath
    			},
    			open(index) {
    				let element = document.querySelector(".el-menu--popup")
    				if(index == '/assetCatalogueManag') {
    					element.style.minWidth = '135px'
    				} else if (index == '/dataMarket') {
    					element.style.minWidth = '172px'
    				}
    			}
    		},
    		watch: {
    			// 监听路由变化
    			'$route.path': {
    				handler(routePath) {
    					this.initMenuActive(routePath)
    				},
    				immediate: true
    			},
    		}
    	}
    </script>

# 最终效果： #

二级菜单宽度自适应父级菜单宽度

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATzNvaG4_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATzNvaG4_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATzNvaG4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/49677593d0fa4ab083565a8137d5dd57.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATzNvaG4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/e208183d92a843dbb64c9d6bf4b69375.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATzNvaG4_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/710efe9d79fc4daca40a0c59da0dfeb4.png