el-input使用textarea后回显出现空白但是一输入内容就恢复正常
时间: 2024-05-05 20:15:16 浏览: 17
这可能是因为el-input的默认行高和textarea的行高不同所导致的。当el-input使用textarea时,它会将textarea的高度设置为与el-input相同,但是默认的行高可能会导致一些空白出现。当你开始输入内容时,el-input会自动调整textarea的行高,从而消除空白。
要解决这个问题,你可以尝试在el-input中设置行高,以使其与textarea一致。例如:
```
<el-input
type="textarea"
:rows="3"
:style="{ lineHeight: 'normal' }"
></el-input>
```
在这个例子中,我们将行高设置为“normal”,这将使它与textarea的默认行高一致。你还可以尝试其他值来找到最适合你的样式。
相关问题
el-input textarea回显出现空白,撑高了盒子
这个问题可能是因为文本框中的内容包含了换行符,导致文本框的高度增加,而盒子的高度没有随之调整。
解决方法可以尝试设置文本框的高度为auto,这样文本框的高度会根据内容自适应。也可以使用CSS属性overflow:auto来允许文本框出现滚动条,以便容纳更多的内容。
另外,如果使用的是el-form组件,可以考虑将textarea组件包裹在el-form-item中,这样可以自动处理表单项的布局和样式。
el-input textarea 固定高度
el-input textarea的高度可以通过CSS样式来进行设置。以下是两种设置el-input textarea固定高度的方法:
1. 使用CSS样式设置el-input textarea的高度:
```css
.el-textarea {
height: 88px;
}
.el-textarea__inner {
height: 88px;
}
```
2. 使用Vue.js的语法设置el-input textarea的高度:
```html
<el-input type="textarea" :rows="2" autosize></el-input>
```
在上述代码中,我们将el-input的类型设置为textarea,并使用autosize属性启用自适应高度。通过设置rows属性,我们可以指定el-input的初始行数。在这个例子中,我们将最小行数设置为1,最大行数设置为2,样el-input的高度就会根据输入内容的多少自适应。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)