Skip to content
#

Form 表单

基础用法

vue
<template>
  <a-form :model="formData">
    <a-form-item label="名称" prop="name">
      <a-input v-model="formData.name" />
    </a-form-item>
    <a-form-item label="资源" prop="res">
      <a-radio-group v-model="formData.resource">
        <a-radio label="online">线上</a-radio>
        <a-radio label="offline">线下</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="分类" prop="class">
      <a-checkbox-group v-model="formData.class">
        <a-checkbox label="1">汽车</a-checkbox>
        <a-checkbox label="2">数码</a-checkbox>
        <a-checkbox label="3">汽车</a-checkbox>
        <a-checkbox label="4">美食</a-checkbox>
      </a-checkbox-group>
    </a-form-item>
    <a-form-item label="同步更新" prop="update">
      <a-switch v-model="formData.update" />
    </a-form-item>
  </a-form>
  <div>
    <a-button type="primary">保存</a-button>
    <a-button>取消</a-button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
const formData = reactive({
  name: '',
  resource: '',
  class: [],
  update: false
});
const rules = {
  name: [{ required: true, message: '请输入', trigger: 'blur' }]
};
</script>

form 属性

名称类型可选值默认值说明
modelobject--表单数据对象
rulesobject--表单验证规则

form-item 属性

名称类型可选值默认值说明
labelstring--标签文本
propstring-falsemodel 的键名