Vue3 FormKit组件textarea的rows属性不生效问题求助

数据老陈

2026-7-1

解决FormKit中textarea的rows属性不生效问题

问题分析

你在FormKit中使用rows属性设置textarea高度但未生效，即使属性已传递到组件，核心原因是FormKit的默认样式为textarea设置了固定的min-height，该CSS属性优先级高于原生的rows属性，导致rows的设置被覆盖。

解决方案

方案1：重置textarea的min-height样式

通过FormKit的classes属性给底层textarea元素添加自定义类，覆盖默认的min-height：

<FormKit
  type="textarea"
  name="notes"
  :rows="2"
  :value="datigenerali?.notes"
  label="Data Giornale"
  :classes="{ input: 'min-h-auto' }"
/>

如果需要保留你的自定义formKitClasses，可以合并类配置：

<FormKit
  type="textarea"
  name="notes"
  :rows="2"
  :value="datigenerali?.notes"
  label="Data Giornale"
  :classes="{ ...formKitClasses, input: [...(formKitClasses?.input || []), 'min-h-auto'] }"
/>

方案2：通过attrs显式传递原生属性与样式

使用FormKit的attrs属性直接给原生textarea元素传递配置，确保样式优先级：

<FormKit
  type="textarea"
  name="notes"
  :attrs="{ rows: 2, style: 'min-height: auto;' }"
  :value="datigenerali?.notes"
  label="Data Giornale"
  :classes="formKitClasses"
/>