成功el-menu设置选中项样式
<el-menu
mode="horizontal"
class="topMenu"
background-color="transparent"
text-color="#fff"
active-text-color="#ffd04b"
:default-active="ActiveIndex"
:router="false"
:unique-opened="true"
@select="HandleSelect"
>
<el-menu-item index="1" @click="newPatient" v-if="if_newPatient">
<div style="margin-top: 10px; text-align: center">
<img style="width: 48px; height: 48px" src="@/assets/img/xjbl.png" />
</div>
<div style="font-size: 12px; margin-top: 2px; text-align: center">
测试1
</div>
</el-menu-item>
<el-menu-item index="2" @click="SelectCase" v-if="if_SelectCase">
<div style="margin-top: 10px; text-align: center">
<img style="width: 48px; height: 48px" src="@/assets/img/kjcx.png" />
</div>
<div style="font-size: 12px; margin-top: 2px; text-align: center">
测试2
</div>
</el-menu-item>
</el-menu>
<style lang="scss" scoped>
.logo {
height: 100%;
float: left;
padding: 10px 20px;
}
.topMenu {
float: left;
}
.topActions {
float: right;
}
.el-menu--horizontal > .el-menu-item {
height: 88px;
line-height: 10px;
}
.el-menu.el-menu--horizontal {
border-bottom: 0px;
}
.el-menu-item {
height: 88px;
line-height: 88px;
}
.el-menu-item {
padding-left: 10px;
padding-right: 10px;
}
.el-menu-item.is-active {
font-weight:bold !important;
}
</style>
关键代码:.el-menu-item.is-active {
font-weight:bold !important;
}