elementUi NavMenu 导航菜单去除下划白线

<el-menuclass="el-menu-vertical-demo menu-left":unique-opened="true"v-for="(muen,key) in menuList":key="muen.menuId":collapse="showCollapse":default-openeds="defaultOpen"theme="dark"//2个事件，请切记，不能写:default-active="defaultActive"，computed: {defaultActive(){return this.$route.path.replace('/login');//路由替换，将当前的路由替换掉}},否则点击二级菜单的时候，别的二级菜单会展开，@open="handleOpen"@close="handleClose":collapse-transition="true"router><el-submenu:index="muen.menuId"><template slot="title"><i :class="'iconfont '+muen.icon"></i><span class="hidden-xs-only parentMenuName">{{muen.menuName}}</span></template><el-menu-itemv-for="item in muen.children":key="item.menuId":index="item.url"><span>{{item.menuName}}</span></el-menu-item></el-submenu></el-menu>//展开当前一级菜单，关闭其他的菜单handleOpen(key, keyPath) {//当前打开的sub-menu的 key 数组this.defaultOpen = [key];},//点击当前一级菜单关闭handleClose(key, keyPath) {console.log(key);console.log(keyPath);},//展开当前一级菜单，关闭其他的菜单handleOpen(key, keyPath) {//当前打开的sub-menu的 key 数组this.defaultOpen = [key];},//点击当前一级菜单关闭handleClose(key, keyPath) {console.log(key);console.log(keyPath);},

下面的代码放到

<style scoped>
.el-menu.el-menu--horizontal{border: none;
}
/* 标题颜色改变 */
>>>.el-menu--horizontal>.el-submenu .el-submenu__title{width: 14.3rem;color: white;
}
/* hover颜色改变 */
>>>.el-menu--horizontal>.el-submenu .el-submenu__title:hover{color: rgb(102, 97, 97);
}
/* 消除动态添加的三角 */
>>>.el-icon-arrow-down:before{content: none;
}
/* 下拉宽度调整 */
>>>.el-menu-item{width: 5rem;
}
</style>

elementUi NavMenu 导航菜单去除下划白线相关推荐

Elementui NavMenu 导航菜单使用
官方文档https://element.eleme.cn/#/zh-CN/component/menu NavMenu 导航菜单官方使用项目实例官方使用 <el-menu :default ...
element-ui NavMenu 导航菜单通过一个按钮控制
element -ui 里导航菜单是通过两个按钮控制的,但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是clic ...
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
原因:当路由地址发生变化时,想要对应的高亮显示的菜单项发生变化,只需要设置 :default-active="$route.path"即可,但是当跳转的路由(父路由)包含子路由(即 ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
Vant组件NavBar导航栏使用时去除下方白线问题
如上图,在使用Vant组件导航栏时,下方会有白线,但有时是不需要它的,下面是去掉白线的方法: // 去掉导航栏底部白线 .van-hairline--bottom:after { border-b ...
VUE-Element组件（二）NavMenu导航菜单
标签介绍:el-menu为导航菜单组件,el-menu-item表示无子菜单的菜单项,el-submenu表示有子菜单的菜单项.注意el-menu-item和el-submenu最好都加上index标 ...

elementUi NavMenu 导航菜单去除下划白线

elementUi NavMenu 导航菜单去除下划白线相关推荐

最新文章

热门文章

elementUi NavMenu 导航菜单 去除下划白线

elementUi NavMenu 导航菜单 去除下划白线相关推荐

最新文章

热门文章

elementUi NavMenu 导航菜单去除下划白线

elementUi NavMenu 导航菜单去除下划白线相关推荐