在一次做導航欄的時候需要用到菜單組件，覺得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>