Element 使用 textarea 内容实现高度自适应

在 ElInput 组件的 type="textarea" 模式下，你可以使用 autosize 属性来实现内容高度自适应。当没有内容时默认显示 3 行，当有内容时根据内容动态调整高度。

代码：

<el-form-item v-if="item.type === 'textarea'" :rules="checkoutRules(item.rules, item)" :label="item.name":label-width="item.labelWidth || ''" :prop="item.label"><el-input v-model="form[item.label]"type="textarea":autosize="{ minRows: 3, maxRows: 10 }"clearable:maxlength="item.maxlength || 500":placeholder="`请输入${item.name}`"@input="changeAct(item.label, form[item.label], item)"show-word-limit></el-input>
</el-form-item>

解释

• autosize 接受一个对象：
  • minRows: 3 → 最小显示 3 行
  • maxRows: 10 → 最大高度为 10 行，超过后显示滚动条
• 这样，初始时高度为 3 行，输入内容后高度会随内容增加，最多扩展到 10 行。

这样就能实现 无内容时 3 行，有内容时根据内容自动调整高度 的效果。