element

119 阅读1分钟

选择器下拉框

自定义图标

参考博客

输入框

边框颜色

参考博客 改完后需要把原来的失去焦点样式加上,否则将会失效

#app .el-form-item.is-error .el-input__inner,
#app .el-form-item.is-error .el-input__inner:focus,
#app .el-form-item.is-error .el-textarea__inner,
#app .el-form-item.is-error .el-textarea__inner:focus,
#app .el-message-box__input input.invalid,
#app .el-message-box__input input.invalid:focus {
  border-color: #f56c6c;
}

自定义输入框两侧图标的插槽

              <el-input>
                <template #prefix>
                  <img class="prefixIcon" src="../../assets/images/login/登录.svg" />
                </template>
              </el-input>

placeholder颜色

.el-input__inner::placeholder {
  color: rgba(0, 194, 255, 0.5) !important;
}
/* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color: rgba(0, 194, 255, 0.5) !important;
}
/* 火狐 */
.el-input__inner:-moz-placeholder {
  color: rgba(0, 194, 255, 0.5) !important;
}
/*ie*/
.el-input__inner:-ms-input-placeholder {
  color: rgba(0, 194, 255, 0.5) !important;
}

将下拉框渲染到dom中

参考链接

 :popper-append-to-body="false" 

表格

百分比下固定表头,内容自适应,height='100%'

<el-table :data="tableData" style="width: 100%" stripe height="100%" >