vue中Element-ui样式修改

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Mar

啊-苏

3990人浏览 · 2020-09-09 22:43:41

啊-苏 · 2020-09-09 22:43:41 发布

下拉框（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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^