Vue3中如何为表单字段按需配置rules属性

完全可以实现，不需要给无校验需求的字段在formSchema里加空数组占位。利用Vue的条件属性绑定特性，就能让rules属性仅在需要的字段上显示：

Vue在处理属性绑定时，如果绑定的值是undefined、null或false，会自动省略该属性。所以你只需要：

1. 给需要校验的字段在formSchema中配置rules属性，不需要的字段完全不写rules字段
2. 把q-input中的rules绑定改成下面两种写法之一：

写法一：直接绑定（推荐） #

<q-input v-if="prop.component === 'input'"
   outlined
   v-model="dataRef[key]"
   :type="prop.type"
   :label="prop.label"
   maxlength="12"
   class="super-small"
   hint="Name and surname"
   lazy-rules
   :rules="prop.rules"
>
</q-input>

当formSchema里的字段没有rules时，prop.rules是undefined，Vue会自动忽略这个属性，相当于没有给q-input设置rules，和传空数组的效果一致，但不需要在schema里冗余配置。

写法二：明确条件绑定（更直观） #

如果想更清晰地控制，可以用v-bind的对象语法，仅当prop.rules存在时才绑定该属性：

<q-input v-if="prop.component === 'input'"
   outlined
   v-model="dataRef[key]"
   :type="prop.type"
   :label="prop.label"
   maxlength="12"
   class="super-small"
   hint="Name and surname"
   lazy-rules
   v-bind="{ ...(prop.rules && { rules: prop.rules }) }"
>
</q-input>

这种写法通过逻辑与运算符判断，只有当prop.rules存在（非undefined、非null）时，才将rules属性加入绑定对象中。

两种写法都能达到你的需求：不需要校验的字段不用在formSchema里加rules选项，rules属性只会出现在有配置的字段上。

内容的提问来源于stack exchange，提问作者Ben Jerry