更新记录

1.0.1（2026-02-02）

1.0.0（2026-02-02）

基于 VForm 表单设计器的 uni-app 端渲染组件首版发布

支持的组件

基础字段组件

• input 输入框
• textarea 文本域
• number 数字输入框
• radio 单选框
• checkbox 多选框
• select 下拉选择
• switch 开关
• rate 评分
• slider 滑块
• color 颜色选择器

日期时间组件

• date 日期选择
• time 时间选择
• date-range 日期范围
• time-range 时间范围

高级组件

• cascader 级联选择
• picture-upload 图片上传
• file-upload 文件上传
• rich-editor 富文本编辑器
• sub-form 子表单

容器组件

• grid 栅格布局
• table 表格布局
• tab 标签页
• step 步骤表单

展示组件

• static-text 静态文本
• html-text 富文本展示
• divider 分割线
• button 按钮

技术特性

• 基于 Vue 3 + TypeScript 开发
• 使用 wot-design-uni 作为基础组件库
• 统一 VForm JSON 数据格式（widgetList + formConfig）
• 与 PC 端 FormDesigner 设计器数据互通
• 完善的 modelValue 空值处理，避免类型错误

1.0.0（2026-02-02）

1.0.5（2026-02-02）

【修复】修复 radio/select 组件 defaultValue 为 null 时传递给 wd-select-picker 导致类型检查失败的问题 【修复】修复 time-range 组件 getTimeRangeValue 返回 null 导致 wd-datetime-picker 类型错误的问题 【优化】getDefaultValue 函数增强类型安全，根据组件类型返回合适的默认值，避免 null 值传递 【优化】统一所有 Wd 组件的 modelValue 空值处理，确保符合 String | Number | Boolean | Array 类型约束

平台兼容性

uni-app(3.6.16)

uni-app x(3.91)

vform-render 基于VForm表单设计器的动态表单渲染组件

前言

本组件是 VForm 表单设计器的 uni-app 端渲染实现，基于 wot-design-uni 组件库开发，支持 Vue 3 + TypeScript。

• 技术栈：Vue 3 + TypeScript + wot-design-uni
• 数据格式：统一使用 VForm JSON 格式（widgetList + formConfig）
• 设计理念：与 PC 端 FormDesigner 设计器配合使用，实现一次设计、多端渲染

一、使用说明

<template>
  <vform-render
    ref="formRef"
    :form-json="formJson"
    v-model="formData"
    :base-path="basePath"
    :header="header"
    :disabled="false"
    @onSave="handleSave"
    @onChange="handleChange"
    @onValidate="handleValidate"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { VFormJson } from '@/uni_modules/vform-render/components/vform-render/types'

const formRef = ref()
const formData = ref({})
const basePath = 'http://127.0.0.1:8080'
const header = { Authorization: 'Bearer xxx' }

// 表单JSON配置（由FormDesigner设计器生成）
const formJson = ref<VFormJson>({
  widgetList: [],
  formConfig: {}
})

function handleSave(data: Record<string, any>) {
  console.log('表单提交数据：', data)
}

function handleChange(field: string, value: any, data: Record<string, any>) {
  console.log('字段变化：', field, value)
}

function handleValidate(valid: boolean, errors?: any[]) {
  console.log('验证结果：', valid, errors)
}
</script>

Props 说明

Events 说明

二、支持的组件

基础字段组件

日期时间组件

高级组件

容器组件

展示组件

三、数据格式

VFormJson 结构

interface VFormJson {
  widgetList: Widget[]  // 组件列表
  formConfig: VFormConfig  // 表单配置
}

interface VFormConfig {
  labelWidth?: number  // 标签宽度
  labelPosition?: 'left' | 'right' | 'top'  // 标签位置
  labelAlign?: string  // 标签对齐方式
  size?: string  // 组件尺寸
  // ...更多配置
}

interface Widget {
  id: string  // 组件唯一标识
  type: string  // 组件类型
  options: WidgetOptions  // 组件配置
  formItemFlag?: boolean  // 是否为表单项
  widgetList?: Widget[]  // 子组件列表（容器组件）
}

四、依赖说明

五、注意事项

1. modelValue 类型约束：wot-design-uni 组件的 modelValue 不接受 null 值，组件内部已做处理，确保传递 String | Number | Boolean | Array 类型
2. 文件上传：需要配置 base-path 和 header 以正确上传文件
3. 富文本组件：需要额外安装 sp-editor 和 mp-html 依赖
4. 性能考虑：移动端建议控制表单字段数量，避免过多嵌套

六、与 FormDesigner 配合使用

本组件与 PC 端 FormDesigner 设计器配合使用：

1. PC端设计：使用 FormDesigner 设计表单
2. 保存配置：将 widgetList 保存到 rule 字段，formConfig 保存到 options 字段
3. 移动端渲染：从后端获取配置，组装为 VFormJson 格式后传递给 vform-render

// 从后端获取表单模型后组装
const formJson = {
  widgetList: JSON.parse(modelData.rule),
  formConfig: JSON.parse(modelData.options)
}