syncfusion-vue-form-renderer

用途

Syncfusion Vue Form Renderer 用于在 Vue 3 应用中，通过单一 JSON schema 声明式地生成表单。schema 中集中定义字段、布局、校验、动态行为与提交动作，组件据此渲染出完整表单。当用户需要生成、排查或扩展 schema 驱动的 Vue 表单时，可使用本技能。

主要能力

表单 schema 与字段模型：根对象包含 version、properties、layout、settings；支持各类字段控件及其数据类型、UI 交互、字段展示选项，以及面板、表格、标签页、卡片等布局（容器子项通过 propertyId 引用字段）。
校验：内置 required、minLength、maxLength、pattern 等规则；支持 customValidation 自定义校验（valid = ...）；可区分提交时与变更时触发校验。
条件行为：visibleWhen、hideWhen、requiredWhen、readOnlyWhen、disabledWhen，支持规则 schema、嵌套与 and/or 分组、完整操作符列表，并提供逐组件支持矩阵；还涉及 setValueWhen 与 choiceBasedField 配置。
动态表达式：expressionValue 可从其他字段派生值，支持字段引用、数组索引、分组、三元语法及算术/比较/逻辑运算符；内置 PI、TRUE、FALSE、NULL、Math 等常量，以及聚合、数学、字符串、日期函数（含 DATEFORMAT）。
级联下拉：通过 choiceBasedField 实现级联选项，使用 primaryFieldId 与 choiceMapping，showAllWhenNotMapped 控制缺失值行为。
跨字段范围：minMaxRange 支持字段引用对象，实现由另一字段驱动的数值或日期范围约束，可区分固定 min/max 与跨字段范围规则。
远程数据绑定：下拉、多选、复选框组字段可绑定远程选项源，支持 URL 适配器、响应 dataPath、请求头、动态搜索/过滤值，以及 search、sort、filter、skip、take 查询配置。
数据网格：支持静态与远程数据源、列编辑、校验、自定义校验与表达式、由其他表单字段驱动的条件数据源，以及网格搜索、排序、过滤、分页。
表单动作与模板：buttonType 支持 'submit'、'reset'、'button' 及分组按钮动作；支持 submit、change、buttonClick、failure、created 事件；allowMultiple 与 buttonsGroups 可配置标签、动作、样式、图标、禁用状态；可通过 Vue customWidgetSettings、插槽、字段名或模板 ID 自定义控件模板。

使用方式

创建 Vue 3 Vite 应用并安装组件包：

npm create vite@latest my-app -- --template vue
cd my-app
npm install @syncfusion/ej2-vue-form-renderer

安装 Material 3 主题：

npm install @syncfusion/ej2-material3-theme

在 src/App.vue 中注册插件/组件、定义 schema 并绑定提交处理：

<template>
  <ejs-formrenderer :schema="schema" :submit="onSubmit"></ejs-formrenderer>
</template>

<script>
import { FormRendererPlugin, FormRendererComponent } from '@syncfusion/ej2-vue-form-renderer';

export default {
  name: 'App',
  provide: { FormRendererPlugin: [FormRendererPlugin] },
  components: { 'ejs-formrenderer': FormRendererComponent },
  data() {
    return {
      schema: {
        version: '0.1.0',
        properties: {
          emailAddress: {
            id: 'textbox_email',
            name: 'emailAddress',
            type: 'string',
            label: 'Email Address',
            textboxType: 'email',
            required: true,
            widget: 'textbox'
          },
          submit: {
            id: 'submit_button',
            name: 'defaultSubmit',
            type: 'button',
            label: 'Submit',
            buttonType: 'submit',
            widget: 'button'
          }
        },
        layout: [
          { type: 'field', propertyId: 'emailAddress' },
          { type: 'field', propertyId: 'submit' }
        ],
        settings: { name: 'Contact Form' }
      }
    };
  },
  methods: {
    onSubmit(args) {
      if (args && args.data) {
        console.log(args.data, args.isValid);
      }
    }
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/material3.css";
</style>

运行开发服务器：

npm run dev

打开 Vite 输出的本地 URL。建议将校验、条件与表达式保持为 schema 中的声明式配置。

适用场景

需要从 JSON schema 快速生成 Vue 3 表单。
需要条件显示/隐藏、级联下拉、跨字段范围约束、派生值计算等动态表单逻辑。
需要远程数据源、数据网格、自定义控件模板或分组按钮动作的复杂表单。

限制与注意事项

本技能旨在依据仓库文档生成可用的 Vue Form Renderer 表单，不应虚构 schema 不支持的属性。
实现或修复 schema 时应确认：每个字段有唯一 name 和 id；layout 引用有效的 propertyId；控件与字段类型匹配；条件字段使用有效字段引用与操作符；动态表达式以 {name} 语法引用已存在字段名；自定义校验将 valid 赋值为 true 或字符串错误信息；需要提交时包含提交按钮。
保持 name 值稳定，因为它用作载荷键和表达式引用。
控件依赖其他字段时，级联下拉优先用 choiceBasedField，动态 min/max 优先用 minMaxRange。
校验与条件逻辑应紧邻其影响的字段存放，便于理解 schema。
最终校验用 buttonType: 'submit'，需要自定义动作逻辑时用 buttonType: 'button'。
关于收费、价格、平台支持范围等具体信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制与注意事项