el-input type="textarea" 设置高度

如何设置 Element UI 中 el-input 组件为 textarea 并调整其高度
在 Element UI 的 el-input 组件中，可以通过设置 type="textarea" 将输入框转换为多行文本区域。为了进一步控制该文本区域的高度，可以使用以下方法：
方法一：通过原生属性 rows
可以直接利用 rows 属性来定义文本区域的默认显示行数，从而间接影响其高度。
<template>
<el-input
type="textarea"
:rows="4" <!-- 设置初始行数 -->
placeholder="请输入内容">
</el-input>
</template>
登录后复制
此方式简单易用，适用于大多数场景[^1]。

方法二：通过 CSS 自定义样式
如果需要更精确地控制高度，则可通过自定义 CSS 实现固定高度设定。
<template>
<div class="custom-textarea">
<el-input
type="textarea"
placeholder="请输入内容">
</el-input>
</div>
</template>

<style scoped>
.custom-textarea .el-textarea__inner {
height: 100px; /* 设定具体高度 */
}
</style>
登录后复制
这种方式允许开发者完全掌控文本区的实际尺寸，而不依赖于行数计算[^3]。

方法三：动态绑定高度（Vue 数据驱动）
对于某些复杂需求，可能希望根据业务逻辑动态改变文本域的高度。此时可借助 Vue 的数据绑定功能实现。
<template>
<el-input
v-model="content"
type="textarea"
:style="{height: `${dynamicHeight}px`}" <!-- 动态绑定高度 -->
@input="adjustHeight"> <!-- 输入事件触发调整 -->
</el-input>
</template>

<script>
export default {
data() {
return {
content: '',
dynamicHeight: 80, // 初始高度
};
},
methods: {
adjustHeight() {
const lines = this.content.split('\n').length;
this.dynamicHeight = Math.max(80, lines * 20); // 每行增加约20像素
}
}
};
</script>
登录后复制
上述代码展示了如何依据用户输入的内容自动调整文本框高度。

总结
以上三种方案分别针对不同开发需求提供了灵活的选择。无论是静态配置还是动态交互，都可以满足实际项目中的多样化要求。