环境
- ant-design-vue: 1.7.8
- vue2
问题
老项目使用了ant-design-vue: 1.7.8，因为其基于vue2，迁移vue3太过耗费精力。
我们知道，在vue3中实现表单的必填验证相当简单，只需要在a-form-item中设置rules即可：
<a-form-item
label="名称"
name="name"
:rules="[{ required: true, message: '请填写名称' }]"
>
但是这个方法在ant-design-vue: 1.7.8，无效。
解决办法
- 使用a-form-model代替a-form
- 设置ref
- 设置rules规则
- 设置触发规则@blur
- 在提交数据时，设置必填项验证
<a-form-model
ref="form"
layout="vertical"
:model="formState"
:rules="rules"
>
<a-form-model-item
label="区域名称"
prop="areaName"
ref="areaName"
>
<a-input
v-model="formState.areaName"
@blur="
() => {
$refs.areaName.onFieldBlur();
}"
/>
</a-form-model-item>
</a-form-model>
提交数据时：
save () {
// 验证必填项
this.$refs.form.validate(valid => {
if (!valid) {
return false
} else {
// TODO 业务逻辑
})
}
}
})
}
以上。
鉴于本人经验有限，以上问题可能理解不到位或有错误，如有发现请各位评论指正，避免误导更多人。
