• 简体中文

      • 基础功能

      Framework:

      概述

      本章节介绍 Schema FormX 的基础功能，包括表单配置、字段类型等核心概念。掌握这些基础知识后，您就可以开始构建简单的表单了。

      表单配置

      表单配置是 Schema FormX 的核心，通过配置来定义表单的结构和行为。

      基础配置项

      配置项类型说明
      schemaFieldSchema[] | GroupSchema[]表单字段配置
      layoutLayout布局配置
      componentsobject自定义组件映射
      dataobject受控数据
      defaultDataobject默认数据
      onChangefunction数据变化回调

      示例

      字段类型

      Schema FormX 支持以下字段类型：

      类型说明默认组件
      string字符串类型Input
      number数字类型InputNumber
      boolean布尔类型Checkbox
      object对象类型自定义
      array数组类型自定义

      字段配置示例

      const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'username',
    label: '用户名',
    required: true,
    props: {
      placeholder: '请输入用户名'
    }
  },
  {
    type: 'number',
    name: 'age',
    label: '年龄',
    props: {
      min: 0,
      max: 120
    }
  },
  {
    type: 'boolean',
    name: 'agree',
    label: '同意协议'
  }
];

      布局配置

      布局配置控制表单的整体样式和布局：

      const layout: Layout = {
  formClassName: 'my-form',
  formStyle: { maxWidth: '600px' },
  fieldClassName: 'form-field',
  labelClassName: 'field-label',
  controlClassName: 'field-control'
};

      布局配置项

      配置项类型说明
      formClassNamestring表单容器类名
      formStyleCSSProperties表单容器样式
      fieldClassNamestring字段容器类名
      labelClassNamestring标签类名
      controlClassNamestring控件容器类名
      groupsobject分组样式配置
      fieldsobject单个字段样式配置

      组件自定义

      Schema FormX 支持自定义表单控件：

      全局注册

      const components = {
  DefaultControl: MyInputComponent,
  CustomSelect: MySelectComponent
};

<Form components={components} schema={schema} />

      字段指定

      const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'status',
    label: '状态',
    component: 'CustomSelect',
    props: {
      options: ['启用', '禁用']
    }
  }
];