antd Form組件表單在vue3中的使用方式

更新時間：2023年04月22日 09:02:38 作者：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驗證規(guī)則對應使用的

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

表單數(shù)據(jù)存在formState里面