腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

更新時(shí)間：2023年04月22日 09:02:38 作者：Akimoto Hiroshi

這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

antd Form組件表單在vue3使用

antd Form表單組件有個(gè)最需要注意的問(wèn)題，

官方文檔里寫的很清楚

這是什么意思，我們下面說(shuō)個(gè)例子就明白了：

<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>的標(biāo)簽name屬性需要和表單對(duì)象formState里面的字段username對(duì)應(yīng)上，包含在標(biāo)簽里面的<a-input>標(biāo)簽的v-model:value綁定formState.username

這里a-form-item里面的name屬性是用來(lái)給rules驗(yàn)證規(guī)則對(duì)應(yīng)使用的

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: "請(qǐng)輸入用戶名", 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里面