在 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 行,有内容时根据内容自动调整高度 的效果。