vue中Element-ui样式修改
下拉框(el-dropdown)
// hover 下拉框的hover效果
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
background: $bgmColor !important;
transition: background 1.9s;
}
面包屑的字体(el-breadcrumb)
.home .el-breadcrumb__inner a,
.home .el-breadcrumb__inner.is-link {
color: $fontColor;
font-weight: normal;
}
表格样式(el-table)
.el-table {
margin-top: 20px;
height: 684px;
// 标题行样式修改
thead th {
height: 38px;
background: $tablesColor;
transition: background 2s;
}
// 奇数行背景修改
tbody tr {
height: 38PX;
background: $tablesColor;
color: $fontColor;
transition: background 2s;
}
// 偶数行背景修改
tbody .el-table__row--striped td {
height: 38px;
background: $tableColor !important;
transition: background 2s;
}
}
输入框 (el-input)
// 输入框
.el-input__inner {
border-radius: 10px;
height: 30px;
line-height: 30px;
background: $inputColor;
transition: background 2s;
// input提示框字体样式修改
::placeholder {
font-size: 18px;
font-weight: 400;
color: $fontColor;
}
}
element-ui 修改注意点
当无法修改时,可以尝试一下几种方法
- /deep/
// 输入框
/deep/ .el-input__inner {
border-radius: 10px;
height: 30px;
line-height: 30px;
background: $inputColor;
transition: background 2s;
::placeholder {
font-size: 18px;
font-weight: 400;
color: $fontColor;
}
}
- 去除scoped (不推荐)
<style lang='scss' scoped>
// 往往这样我会给这个组件定义一个独一无二父级,避免样式冲突
.box{
.el-input{
}
}
<style>
- 定义全局样式文件 (此方法推荐公共样式管理时使用)
// 在main.js中引入此文件
import './styles/publiStyle.scss'
vue中Element-ui样式修改的更多相关文章
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
随机推荐
- 解决下载的css样式文件在同一排的问题
一.将样式文件里的所有内容复制到word里 Ctrl+F查找替换,将所有分号;替换成;^p 小提示:在word里^p表示回车 二.将央视文件里的所有反括号}进行替换替换成}^p然后将代码整个粘贴回样式 ...
- Modern PHP 使用生成器yield 处理csv文件 Generator
* 使用生成器处理csv文件 <?php function getRows($file) { $handle = fopen($file, 'rb'); if ($handle === fals ...
- ES增删改查
了解了一下python对es 7.5的操作,记录下,不难: #!/usr/bin/env python # -*- coding: UTF-8 -*- from settings import Con ...
- 『GoLang』结构体与方法
结构体 结构体类型 Go 通过结构体的形式支持用户自定义类型,或者叫定制类型. Go 语言结构体是实现自定义类型的一种重要数据类型. 结构体是复合类型(composite types),它由一系列属性 ...
- [转载]SELinux 环境下网络服务设置,配置 Apache 、Samba、NFS
原文地址:http://www.ibm.com/developerworks/cn/linux/l-cn-selinux-services1/index.html?ca=drs- 引言 SELinux ...
- c++ 的学习 第二集函数的重载2 namemangling
1. 本质 采用了name mangling或者叫name decoration ✓ C++编译器默认会对符号名(比如函数名)进行改编.修饰,有些地方翻译为"命名倾轧"✓ 重载时 ...
- virtualbox 桥接模式网络配置虚拟机之间通讯以及虚拟机联网
一般来说桥接模式可以解决所有的网络问题 网卡选择 [root@HELLO network-scripts]# cat ifcfg-eth0 TYPE="Ethernet" PROX ...
- SpaCy下载及安装
SpaCy可以说是坑多到怀疑人生.. 但是看在它那么功能那么强大的份上,我还是决定原谅它哈哈哈~ 1.首先用官网给的命令快速安装纯属扯淡..(结果就是一直拒绝你的连接) 官网:https://spac ...
- 构建idea父工程
构建idea父工程 首先通过idea新建一个Maven项目: 选择本地Maven版本: 工程名称: 选择字符编码:utf-8 file -> Settings -> Editor -> ...
- The Data Way Vol.5|这里有一场资本与开源的 battle
关于「The Data Way」 「The Data Way」是由 SphereEx 公司出品的一档播客节目.这里有开源.数据.技术的故事,同时我们关注开发者的工作日常,也讨论开发者的生活日常:我们聚 ...