element UI 中 el-input 的一些样式修改

今天也有很努力的在赚猫粮钱

接到一个需求，做一个比较简单的表单，项目中用到的是elementUI框架，所以遵循之前同事的代码风格也就用了这个框架，遇到的问题就是el-input修改默认样式。

如若文章存在错误或不足，望理解并帮我指出，感激不尽

首先看一下需要实现的效果：

我需要去除el-input的边框，并且文本是只读。

看一下elementUI官方文档的属性说明

如果只是想要用户无法修改接口返回的内容，用disabled也是可以的，但是样式不太美观

如果用readonly就可以达到效果啦

然后就是去除el-input 默认的边框

首先去控制台检查里通过dom元素查看elementUI样式的class

最好是在外层dom上添加自己命名的类名，以防全局样式造成污染

代码：

<el-form-item label="key:" class="session-file__item">
<el-input type="textarea" autosize  v-model="formSessionFile.fileKey" readonly class="session-file__form"></el-input>
</el-form-item>
<el-form-item label="可填入IP地址:" class="session-file__item">
<el-input v-model="formSessionFile.fileIP" readonly class="session-file__form"></el-input>
</el-form-item>

.session-file__form .el-input__inner {
  border: 0 !important;
  outline: none;
}

.session-file__form .el-textarea__inner {
  border: 0 !important;
  resize: none;
}

这样我们就可以穿透对已有的框架的样式进行修改