更改elementUI组价样式

在一次做导航栏的时候需要用到菜单组件，觉得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>

更改elementUI组价样式相关推荐

Vue 引入element-ui 组价，提示：import 'element-ui/lib/theme-default/index.css'
初始化Vue项目,安装element-ui 组价,导入element-ui 组件 vue 项目安装(cnpm install),项目执行(cnpm run dev), 提示如下错误信息: This d ...
element-ui组价中表单的验证提示显示后台的提示信息及自定义提示
我在做这个的时候一个是分给我的那个页面是有两个接口的,所以提示信息就是根据接口的response.success 提示写一个提示语"XX已存在"如下: html: < ...
vue+elementUI组价学习
1.事件没有实现首先想到的是要在所在方法内进行debugger,看看有没有走进去这个方法 2.vue中的ref作用:本页面获取dom元素 <template><div id=&qu ...
Linux笔记（更改权限chmod，更改所有组chown，umask，隐藏权限chattr）
一.文件或目录权限chmod rw- r-- r-- . --- --- --- -- 所有者 ...
oracle 日志的容量,oracle 11g 更改日志组大小
oracle 11g 更改日志组大小 1.创建新的日志组 1.alter database add logfile group 4 ('/u01/app/oracle/oradata/jian/red ...
计算机更改家庭组密码,Win10系统怎么修改家庭组密码 win10修改家庭组密码的方法...
家庭组是家庭网络上可以共享文件和打印机的一组计算机,可以让我们共享变得更加简单,而在win10系统中访问家庭组是需要密码的,那我们我们也可以自己修改家庭组密码,现在就教大家win10修改家庭组密码的方 ...
element-UI组件el-button样式覆写 - 生效篇
踩坑:el-button样式覆写表单代码参考:  <div class="wd1200 form-container">< ...
计算机鼠标样式,告诉你电脑如何更改鼠标的指针样式？
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到电脑如何更改鼠标的指针样式?的问题,如果我们遇到了电脑如何更改鼠标的指针样式?的情况,该怎么处理怎么才能解决电脑如何更改 ...
Element-ui组ICON图标
Element-ui组ICON图标一.基本用法 Element 内置丰富的图标库主要有以下两种方法设置类名 el-icon-xxx 通常使用i 元素在Element部分组件中设置icon属性 ...

更改elementUI组价样式

更改elementUI组价样式相关推荐

最新文章

热门文章