antd Form组件表单在vue3中的使用方式

<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>

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
    }
  }
})