更改elementUI组价样式
程序员文章站
2022-03-04 11:21:02
...
在一次做导航栏的时候需要用到菜单组件，觉得el-menu-item的宽度太大了，封装的是200px。
注意这里的el-menu-item是下拉框中的item，而不是标题！不是很想放图片，就用一级路径描述来表示导航栏的一项，用二级路径表示鼠标悬浮才出现的下拉项（表述可能不恰当，意会即可）
在当前组件的’<style_>'添加
.el-menu--horizontal {
height: 36px;
border-bottom: solid 0px #e6e6e6;
.el-menu-item{
height: 36px;
line-height: 36px;
width: 30px;
}
这种改法只适用于静态的，一打开网页就被渲染的组件，所以如果el-menu-item是作为下拉框的标题存在，也就是一级路径，那是可以改变的。但是作为二级路径时，上面的方法不起作用。
.el-menu-item{
height: 36px !important;
line-height: 36px !important;
width: 30px !important;
}
和上一种方法不一样的不止是加了!important，因为即使上面加了这句还是一样起不了作用的。解决方法是将覆盖的代码放到index.html中。
我的index.html是这样的（虽然菜单下拉框是el-menu-item，但下拉框中的item样式是通过修改.el-menu–popup改变的！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data-analysis</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<style>
.el-submenu__title{
padding: 0px !important;
height: 35px !important;
line-height: 34px !important;
}
.el-submenu__icon-arrow{
margin: 0px !important;
}
.el-menu--popup{
min-width: 100px !important;
}
</style>
</body>
</html>