表单渲染

本文介绍如何在业务项目中渲染由设计器生成的表单配置，包括整体流程、运行时依赖与接入示例，帮助你把「云端配置」真正落地到业务页面。

渲染流程总览

设计器会将表单保存为一份 JSON 配置，运行时大致经历以下步骤：

获取配置：从接口或本地文件中获取表单 JSON。
解析配置：通过 解析器（resolver） 将 JSON 转为 AEUI 表单可识别的配置结构。
渲染表单：将解析后的配置传入 AEUI 的 AeForm 组件进行实际渲染。
收集数据：监听表单提交或变更事件，获取结构化表单数据并上报或入库。

无论是前后端分离项目，还是低代码平台接入，整体思路都可以概括为：配置驱动 → 解析转换 → 组件渲染。

运行时依赖

表单渲染通常依赖以下几个部分：

Element Plus：基础 UI 组件库。
advanced-ele-ui（AEUI）：提供 AeForm 等高级表单/表格组件。
解析器：如 advanced-form-designer-resolver，负责将设计器产出的 JSON 转换为 AEUI 可用的配置对象。
网络请求模块：用于拉取远程表单配置与提交数据（可复用项目现有的请求封装）。

在实际项目中，你只需要在运行时安装并注册 AEUI 组件库，并在需要的页面中引入解析器，即可完成接入。

安装依赖

下面以常见的技术栈为例，说明需要的依赖（命令仅示意，可按项目实际情况调整）：

bash

# 安装 Element Plus
pnpm add element-plus

# 安装 AEUI
pnpm add advanced-ele-ui

# 安装解析器
pnpm add advanced-form-designer-resolver

完成安装后，在项目入口中按 AEUI 官方文档注册组件库，然后在业务页面内使用表单渲染。

从设计器文档到可渲染表单

设计器通常会保存一份完整的「设计文档」，其中包含表单的 schemas 与 props 等信息。以一个简化结构为例：

const designerDoc = {
  createdAt: 0,
  updatedAt: 0,
  schemas: { /* 设计器生成的字段配置 */ },
  props: { /* 表单级配置，如布局、按钮等 */ }
}

接下来，通过解析器把这份文档转换为 AeForm 可直接使用的配置：

import { schemaResolver, propsResolver } from 'advanced-form-designer-resolver'

// 1. 解析设计文档
const formSchemas = schemaResolver(designerDoc.schemas)
const formProps = propsResolver(designerDoc.props)

// 2. 业务侧的实际上下文结构（如请求函数、全局变量等）
const formExcontext = {
  // 比如：统一注入请求方法、字典加载方法、权限判断方法等
}

在页面中渲染 AeForm

在 Vue 组件中，将解析结果与运行时上下文传入 AeForm 即可完成渲染。以下是一个典型示例（简化版）：

vue

<template>
  <AeForm
    :ref="setFormRef"
    v-bind="formProps"
    v-model:model="formModel"
    :controlled="true"
    :schemas="formSchemas"
    :excontext="formExcontext"
    :auto-init-field="true"
    :show-error-notice="false"
    :disabled="false"
    :designable="false"
    class="element-plus-beauty"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AeForm } from 'advanced-ele-ui'
import { schemaResolver, propsResolver } from 'advanced-form-designer-resolver'

// 1. 假设 designerDoc 来自接口
const designerDoc = /* 从接口获取的表单设计文档 */

// 2. 解析配置
const formSchemas = schemaResolver(designerDoc.schemas)
const formProps = propsResolver(designerDoc.props)

// 3. 业务侧状态与上下文
const formModel = ref<Record<string, any>>({})
const formExcontext = {
  // 例如：请求函数、权限函数、字典加载等
}

const formRef = ref()
const setFormRef = (refInstance: any) => {
  formRef.value = refInstance
}

</script>

你可以根据实际需要增删属性，例如切换 designable、控制禁用状态、打开错误提示等。

通过以上方式，可以将「设计时」和「运行时」彻底解耦，实现表单的在线设计、远程分发与动态渲染。

表单渲染 ​

渲染流程总览 ​

运行时依赖 ​

安装依赖 ​