• 简体中文

      • 高级功能

      Framework:

      概述

      本章节介绍 Schema FormX 的高级功能，包括自定义组件、验证规则、分组表单、依赖联动等。掌握这些功能后，您可以构建更加复杂和灵活的表单。

      自定义组件

      Schema FormX 支持完全自定义表单控件，您可以：

      • 使用任意 UI 组件作为表单控件
      • 全局注册自定义组件
      • 为特定字段指定自定义组件

      了解更多 →

      验证规则

      Schema FormX 提供了灵活的验证机制：

      • 内置必填验证
      • 自定义验证函数
      • 异步验证
      • 验证时机控制

      了解更多 →

      分组表单

      分组表单功能允许您：

      • 将表单字段分组显示
      • 自定义分组容器样式
      • 控制分组顺序和布局

      了解更多 →

      依赖联动

      依赖联动功能支持：

      • 声明字段间的依赖关系
      • 依赖变化时自动触发联动逻辑
      • 更新字段值或配置
      • 异步联动处理

      了解更多 →

      功能对比

      功能基础实现高级实现
      字段类型内置类型自定义组件
      验证规则必填验证自定义验证器
      表单布局简单布局分组布局
      数据联动无依赖联动

      使用场景

      复杂业务表单

      当表单包含复杂的业务逻辑时，可以使用依赖联动功能：

      const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'country',
    label: '国家'
  },
  {
    type: 'string',
    name: 'city',
    label: '城市',
    deps: ['country'],
    onDepsChange: async ({ deps, schema }) => {
      // 根据国家动态更新城市选项
      const cities = await getCitiesByCountry(deps[0]);
      return {
        schema: {
          ...schema,
          props: { options: cities }
        }
      };
    }
  }
];

      动态表单配置

      当表单配置需要根据用户输入动态变化时：

      const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'formType',
    label: '表单类型',
    props: {
      options: ['简单表单', '复杂表单']
    }
  },
  {
    type: 'string',
    name: 'extraField',
    label: '额外字段',
    deps: ['formType'],
    onDepsChange: ({ deps, schema }) => {
      // 根据表单类型决定是否显示额外字段
      return {
        schema: {
          ...schema,
          hidden: deps[0] !== '复杂表单'
        }
      };
    }
  }
];

      多步骤表单

      使用分组表单功能实现多步骤表单：

      const schema: GroupSchema[] = [
  {
    key: 'step1',
    props: { title: '基本信息' },
    fields: [
      { type: 'string', name: 'name', label: '姓名' },
      { type: 'string', name: 'email', label: '邮箱' }
    ]
  },
  {
    key: 'step2',
    props: { title: '详细信息' },
    fields: [
      { type: 'string', name: 'address', label: '地址' },
      { type: 'string', name: 'phone', label: '电话' }
    ]
  }
];

      最佳实践

      1. 按需使用：根据实际需求选择合适的功能，避免过度设计
      2. 性能优化：对于复杂的依赖联动，注意性能优化
      3. 错误处理：为异步操作添加适当的错误处理
      4. 代码复用：将常用的功能封装为可复用的模块