antd Form组件表单在vue3中的使用方式
作者：Akimoto Hiroshi
这篇文章主要介绍了antd Form组件表单在vue3中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
antd Form组件表单在vue3使用
antd Form表单组件有个最需要注意的问题，
官方文档里写的很清楚
这是什么意思，我们下面说个例子就明白了：
<template>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item ref="username" name="username">
<label>Username:</label>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">Create</a-button>
<a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
</a-form-item>
</a-form>
</template>
这里<a-form-item>的标签name属性需要和表单对象formState里面的字段username对应上，包含在标签里面的<a-input>标签的v-model:value绑定formState.username
这里a-form-item里面的name属性是用来给rules验证规则对应使用的
import { defineComponent, reactive, ref, toRaw } from "vue"
export default defineComponent({
setup() {
const formState = reactive({
name: "",
username: '',
password: '',
password2: '',
code: ''
})
const rules = {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
]
}
return {
labelCol: {
span: 4,
},
wrapperCol: {
span: 14,
},
formState,
rules
}
}
})
表单数据存在formState里面
验证规则存在rules里面
最后别忘了返回：
效果：
当失去焦点的时候，会提示用户
输入字符长度不在3-5之间的话，也会提示：
但是如果这样写，就不会有错误提示了：
效果：
失去焦点以后，并不会提示：
这就是官方文档里面提到的，<a-form-item>只会监听第一个子元素的变化
如果我们调换一下位置：
又可以提示了：
如果非要把label放在输入框上面，又不想影响提示功能，怎么办？？
<a-form-item>上面套一个div不就完事了：
效果：
当然最方便的就是默认的样式，直接在<a-form-item>标签里面配置label属性就可以了：
效果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。