element 菜單替換選中下劃線樣式和隱藏下劃線

<el-menu :default-active="activeIndex" class="el-menu-demo" text-color='#222222' close="" active-text-color='#1f84e0' mode="horizontal"
       @select="handleSelect">
        <el-menu-item class="el-menu-item" icon='el-icon-caret-top' index="1">首頁<i v-if="activeIndex=='1'" class="el-icon-caret-top"></i></el-menu-item>
        <el-menu-item index="2" >熱門諮詢 <i class="el-icon-caret-top" v-if="activeIndex=='2'"></i></el-menu-item>
    </el-menu>

上面是用圖標顯示

css隱藏,就是修改編輯顏色

.el-menu-demo .el-menu-item{
    border-bottom-color:#ffffff!important;
    font-size: 16px;

}

圖標位於菜單文字中間

.el-icon-caret-top{
    position: absolute;
    bottom: -8px;
    left: 34%;
    color: #1F51A9!important;
}

顯示修改