1.设置弹出窗被选中的样式
<el-menu :collapse="true" class="el-menu-vertical-demo enterpriseslistLocation" @close="handleClose" @open="handleOpen" @select="handleSelect" :default-active="'10'">
<div class="companyLocation">
<el-submenu index="1" popper-class="companyPopper"> // popper-class 是给弹出来的子菜单添加样式
<template slot="title">
<i class="MenuIconSpriteLocation MenuIconSprite"></i>
<span>地区</span>
</template>
<template v-for="item in cityData" >
<el-menu-item :index="item.id+''" > // index 是一个字符串,所以如果id是数字的话需要转成字符串,首先
<input type="radio" name="status" :value="item.value" v-model="city" :id="item.id" style="display:none">
<span class="itembuttons" @click="changecitys('',item.value)">
{{item.label}}
</span >
</el-menu-item>
</template>
<el-cascader
change-on-select
:options="procity"
v-model="procitydata"
@change="handleChange"
placeholder="请选择更多城市"
clearable
style="width: 280px">
</el-cascader>
</el-submenu>
</div>
</el-menu>
这里的:default-active 意思是触发选中el-menu-item 中的对应的index,如果想要要默认选中第一项就使用 :default-active =“‘10’”,我这里 子菜单中第一个index是10所以是“‘10’”,注意这里的值也是字符串;
注意@open="handleOpen" 设置之后就会有会忽视的效果
2.设置子菜单选中时候的样式
.children ul li.is-active{
……
}
网友评论