<el-form-item label="质检备注"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;" ></el-input> </el-form-item> vue 和 element-ui实现补全修改代码,需求是代码原有基础上 将el-input最低高度为132px,这样出现一个问题需要修复,el-textarea__inner的min-height产生了冲突,需要解决,实现el-input的最低高度为132px,并且只对当前的el-textarea__inner生效,因为还有别的代码有el-textarea__inner避免冲突
时间: 2023-07-16 14:16:01 浏览: 196
可以在CSS中针对当前的el-input组件下的el-textarea__inner元素设置min-height属性。
首先,在样式表中添加以下代码:
```
.el-input .el-textarea__inner {
min-height: 132px !important;
}
```
然后,将el-input的style属性修改为:
```
style="width: 70%;min-height: 132px;overflow: auto;"
```
这里加上了一个overflow: auto;属性,以防止内容溢出。这样就可以实现el-input的最低高度为132px,并且只对当前的el-textarea__inner生效,避免冲突。
相关问题
<el-form-item label="质检备注"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;" ></el-input> </el-form-item> vue 和 element-ui实现补全修改代码,需求是代码原有基础上 将el-input最低高度为132px,出现框的样式和高度不匹配
你可以通过给 `el-input` 的外层包裹一个 `div` 元素,并设置该元素的高度为 132px,从而实现 `el-input` 的最低高度为 132px。代码示例如下:
```
<el-form-item label="质检备注">
<div style="height: 132px;">
<el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;"></el-input>
</div>
</el-form-item>
```
如果出现框的样式和高度不匹配,你可以通过修改 `el-input` 的样式来解决。比如,你可以添加如下的样式来设置 `el-input` 的出现框的最小高度为 132px:
```
.el-input__inner {
min-height: 132px;
}
```
将这段样式添加到你的 CSS 文件中或者在 `style` 标签中添加即可。
<el-form-item label="维修记录:" prop="textarea"> <el-input v-model="ruleForm.textarea" placeholder="维修记录"/> </el-form-item>
这是一个基于 Element UI 的表单组件,用于输入维修记录。其中,`label` 属性表示表单项的标签文本,`prop` 属性表示该表单项与表单数据对象中的哪个属性绑定,`v-model` 指令则将表单项的值与 `ruleForm.textarea` 属性进行双向数据绑定。
在这个表单项中,使用了 `el-input` 组件来实现输入框,并设置了 `placeholder` 属性来提供输入提示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)