A2UI 表单 Form

通过 Schema 配置自动生成 XTO UI 表单，支持多种字段类型和校验规则。

基础用法

使用 FormSchema 配置表单字段，A2UI 会自动渲染对应的 XTO UI 组件。

<script setup>
import { SchemaRenderer } from '@xto/lowcode-shared'

const schema = {
  id: 'user-form',
  name: '用户表单',
  version: '1.0.0',
  fields: [
    { name: 'username', label: '用户名', type: 'input' },
    { name: 'email', label: '邮箱', type: 'input' }
  ]
}
</script>

<template>
  <SchemaRenderer :schema="schema" />
</template>

字段配置

每个字段支持以下属性：

属性	类型	必填	说明
name	string	是	字段名，作为表单数据的 key
label	string	是	显示标签
type	string	是	字段类型，映射到具体组件
props	object	否	组件属性配置
rules	array	否	校验规则

字段类型映射

type	组件	说明
input	XInput	文本输入框
number	XInputNumber	数字输入框
textarea	XTextarea	多行文本域
select	XSelect	下拉选择器
date	XDatePicker	日期选择器
time	XTimePicker	时间选择器
switch	XSwitch	开关
checkbox	XCheckbox	复选框
radio	XRadioGroup	单选组
rate	XRate	评分
slider	XSlider	滑块
upload	XUpload	文件上传

校验规则

支持以下校验规则类型：

规则	说明
required	必填校验
min	最小值/最小长度
max	最大值/最大长度
pattern	正则表达式校验
custom	自定义校验函数

示例

{
  "name": "password",
  "label": "密码",
  "type": "input",
  "rules": [
    { "type": "required", "message": "请输入密码" },
    { "type": "min", "value": 6, "message": "密码至少6位" },
    { "type": "max", "value": 20, "message": "密码最多20位" }
  ]
}

组件属性配置

通过 props 字段配置组件属性：

{
  "name": "status",
  "label": "状态",
  "type": "select",
  "props": {
    "placeholder": "请选择状态",
    "clearable": true,
    "options": [
      { "label": "启用", "value": 1 },
      { "label": "禁用", "value": 0 }
    ]
  }
}

表单布局

FormSchema 支持布局配置：

interface FormLayout {
  labelWidth?: string | number  // 标签宽度
  labelPosition?: 'left' | 'right' | 'top'  // 标签位置
  inline?: boolean  // 行内表单
}

完整示例

{
  "id": "complete-form",
  "name": "完整表单",
  "version": "1.0.0",
  "fields": [
    { "name": "username", "label": "用户名", "type": "input", "rules": [{ "type": "required" }] },
    { "name": "age", "label": "年龄", "type": "number", "props": { "min": 0, "max": 150 } },
    { "name": "gender", "label": "性别", "type": "select", "props": { "options": [{ "label": "男", "value": "male" }, { "label": "女", "value": "female" }] } },
    { "name": "birthday", "label": "生日", "type": "date" },
    { "name": "bio", "label": "简介", "type": "textarea", "props": { "rows": 4 } },
    { "name": "active", "label": "是否激活", "type": "switch" },
    { "name": "score", "label": "评分", "type": "rate" }
  ],
  "layout": {
    "labelWidth": "100px",
    "labelPosition": "right"
  }
}

API

SchemaRenderer Props

属性	类型	说明
schema	FormSchema	表单 Schema 配置
modelValue	object	表单数据（可选）

SchemaRenderer Events

事件	参数	说明
update:modelValue	object	表单数据变化
submit	object	提交表单数据

相关链接

• A2UI 输入框 - Input 字段详细配置
• A2UI 选择器 - Select 字段详细配置
• A2UI 日期选择器 - DatePicker 字段详细配置
• Schema 规范 - FormSchema 完整定义