el-input输入框，el-select下拉框选项样式修改

1.el-input修改样式

在html的样式中发现input输入框的样式写在.el-input__inner中，此时使用常规css样式写法不生效，需使用/deep/，写法如下：

/deep/.el-input__inner {
  height: 30px;
  line-height: 30px;
}

/deep/写法针对el-select也生效，但是仅为输入框，下拉框无效。

2.el-select下拉框修改样式

在html的样式中发现el-select下拉框的样式写在.el-select-dropdown__item 中，修改下拉框样式需在el-select中加入:popper-append-to-body="false"。

<el-select placeholder="请选择角色" :popper-append-to-body="false">
  <el-option label="超级管理员"></el-option>
  <el-option label="主管"></el-option>
  <el-option label="测试角色"></el-option>
</el-select>

后在style样式中使用/deep/写入下拉框样式即可生效。

/deep/.el-select-dropdown__item {
  font-size: 12px;
}

注：若是使用vue-cli脚手架生成项目，并配置全局样式表，如global.css，可不加/deep/直接在global.css中书写，同样生效，只是这样会使整个项目的相同元素都改变样式，而不只是在当前的vue文件生效（vue文件的style书写了scoped，代表写入的css样式只对当前vue文件的元素生效)，例如：

/* 表头样式更改 */
.el-table .el-table__header-wrapper tr th{
  padding: 5px 0;
  background-color: #F4F8FB;
  color: #333;
  box-shadow: inset 0 -1px 0 0 #D6D6D6;
}
/* 表格行高改变及无边框 */
.el-table td, .el-table th {
  padding: 7px 0;
  border: none;
}
/* 表格无外边框但可拉升 */
.el-table--border, .el-table--group {
  border: 0;
}