Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >基于 Vue 3 的动态表单开发解决方案,使用 WorkfoxFormGenerator 实现可视化表单设计与渲染,助力快速构建属于你自己的低代码开发平台。

基于 Vue 3 的动态表单开发解决方案,使用 WorkfoxFormGenerator 实现可视化表单设计与渲染,助力快速构建属于你自己的低代码开发平台。

原创
作者头像
xbos
发布于 2025-05-05 06:54:51
发布于 2025-05-05 06:54:51
2690
举报

WorkfoxFormGennerator 是一个基于 Vue 3 和 Element Plus 构建的动态表单生成与渲染库。它提供了灵活的表单设计与渲染功能,支持表单字段的动态管理和自定义组件渲染。该项目主要面向需要自定义动态表单的开发者,支持表单设计、字段渲染、表单验证和数据交互等功能。

WorkfoxFormGennerator 支持用户以 JSON 的形式配置自定义组件,用户只需通过定义组件名称(type)、标签名(label)、属性(attributes)、事件(events)等信息,即可实现组件的注册、渲染和交互逻辑,从而满足个性化的表单设计与业务扩展需求,无需修改核心代码即可灵活扩展组件体系。

项目预览

在线预览地址

表单设计器
表单设计器

主要功能

  1. 动态表单设计器 (Form Designer):通过图形化界面设计表单,支持字段拖拽、表单布局自定义,方便用户快速构建表单。
  2. 表单渲染器 (Form Renderer):通过 JSON 配置生成表单,支持动态展示设计好的表单,并且支持与后端 API 交互,获取表单数据或提交表单。
  3. 自定义字段组件:提供灵活的字段组件,支持根据业务需求自由组合自定义表单字段和组件。
  4. 表单验证:内置多种表单验证规则,支持主子表数据的统一验证,确保数据的正确性。
  5. 文件上传:支持集成文件图片上传功能,方便与后端进行文件上传操作。
  6. 高度可配置:通过传入配置 JSON,可以自由配置字段、表单样式、验证规则、从后端接口获取选项数据等。

技术栈

Vue 3:响应式、灵活的前端框架。

Element Plus:为 Vue 3 提供的 UI 组件库,提供高质量的组件支持。

vuedraggable:用于表单项拖拽排序功能,增强表单交互性。

quill:富文本编辑器,用于提供强大的富文本输入框。

codemirror: 代码编辑器,预览表单JSON及编写事件代码

axios: 发起网络请求

已支持的组件

更多组件请使用属性customWidgetList进行配置

容器组件

组件名

描述

栅格布局

实现响应式布局

卡片

卡片式区域容器

标签页

多标签页切换容器

Flex 行

灵活布局容器

子表单

支持嵌套子表单

表单组件

组件名

描述

输入框

文本输入

数字输入框

仅允许输入数字

选择框

单/多项下拉选择框

树形选择框

树状结构数据选择框

单选框

多个选项中选一个

多选框

多个选项中选多个

开关

二元状态切换

日期时间

日期、时间选择

图片上传

上传图片

文件上传

上传文件

评分

星级评分输入

富文本

支持图文编辑

单选框、多选框、树形选择框、选择框 可配置接口从后端获取数据

基础组件

组件名

描述

按钮

可配置操作按钮

标题

用于展示标题

文字

展示说明文字

提示

警告/提示信息

分割线

页面分隔线

安装与使用

可以通过 npm 安装并在 Vue 项目中使用,通过简单的 API 调用和配置,快速实现表单设计与渲染。

安装

代码语言:sh
AI代码解释
复制
npm install element-plus
npm install vuedraggable
npm install workfox-form-generator

使用

代码语言:js
AI代码解释
复制
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import Draggable from 'vuedraggable'

import WorkfoxFormGenerator from 'workfox-form-generator'
import 'workfox-form-generator/dist/workfox-form-generator.css'

app.component('Draggable', Draggable)
app.use(ElementPlus)
app.use(WorkfoxFormGenerator)//注册设计器FormDesigner、渲染器FormRenderer
代码语言:vue
AI代码解释
复制
<FormDesigner ref="formDesignerRef" @save="save" @close="close" :formJson="formJson" :requestHeaders="requestHeaders" :uploadApi="uploadApi" :fieldData="fieldData" :config="config" :customWidgetList="customWidgetList">
    <template #heardButtons></template>
</FormDesigner>

<FormRenderer ref="formRendererRef" :formJson="formJson" :requestHeaders="requestHeaders" :uploadApi="uploadApi" :customWidgetList="customWidgetList"/>
代码语言:js
AI代码解释
复制
const formDesignerRef = ref()// 设计器ref
const formRendererRef = ref() // 渲染器ref

// 设计器配置
const config = ref({
  showSaveButton: true,// 显示保存按钮
  showCloseButton: true,// 显示关闭按钮
  loadLocalData: true// 设计器挂载时加载本地数据
})

// 请求头
const requestHeaders = ref({
  Authorization: ''
})

// 文件图片上传地址
const uploadApi = ref('/api/upms/file/upload')

// 表单配置数据
const formJson = ref()

//字段数据
const fieldData = ref({
  "fields": [
    { "label": "字段描述", "value": "字段名称" },
  ],
  "children": [
    {
      "label": "子表描述",
      "value": "子表名称",
      "fields": [
        { "label": "字段描述", "value": "字段名称" },
      ]
    },
  ]
})

//自定义组件列表
const customWidgetList = ref([])// 请查看对应章节

// 设计器保存事件
const save = (data) => {
  console.log('保存表单设计器数据', data)
}

// 设计器关闭事件
const close = () => {
  console.log('触发关闭表单设计器事件')
}

// 异步设置设计器的表单内容
formDesignerRef.value.setFormJson(formJson.value)

// 清空设计器内容
formDesignerRef.value.resetFormJson()

// 异步设置渲染器的表单内容
formRendererRef.value.setFormJson(formJson.value)

// 获取表单填写内容,会检查填写内容是否正确,错误会抛出异常
formRendererRef.value.getFormData()

// 设置表单数据
formRendererRef.value.setFormData(formData.value)

事件执行器使用说明(Event Executor)

上下文参数

参数名

说明

widgetConfig

当前组件的配置内容

formData

当前整个表单的填写数据

widgetList

当前表单组件树

value

当前组件的值(仅在 onChange 中可用)


可用方法

1. setHidden(hidden: boolean)

设置当前组件的隐藏状态。

2. getValue(): any

获取当前组件的值。

3. setValue(value: any)

设置当前组件的值。

4. getFieldValue(fieldId: string): any

通过id获取指定组件的填写内容

5. setFieldValue(fieldId: string, value: any)

通过id设置指定组件的内容

6. setFieldHidden(fieldId: string, hidden: boolean)

通过id设置指定组件显示状态

7. notify(message: string, type?: 'success' | 'info' | 'warning' | 'error', duration?: number)

弹出提示消息。:

代码语言:js
AI代码解释
复制
notify('保存成功', 'success')
8. request

发起网络请求,会携带传入的请求头信息

代码语言:js
AI代码解释
复制
// GET 请求
request.get('/api/user', { id: 1 }).then(res => {
  console.log(res)
})

// POST 请求
request.post('/api/user', { name: '' })

// PUT 请求
request.put('/api/user/1', { name: '' })

// DELETE 请求
request.delete('/api/user/1')

自定义组件配置说明

自定义组件的实现原理:通过一套统一的数据结构(customWidgetList)定义组件的类型(:is="config.type")、属性(v-bind="config.attributes")、事件(如 @change="handleChange")、校验规则(rules),并结合 WidgetContainer 和 FormItemWidget 两个包装组件实现拖拽控制、表单校验等通用功能,最终通过动态组件机制在运行时渲染成真正的 Vue 组件,使设计器和渲染器都可以以 JSON 驱动的方式复用这些组件。

举个例子

代码语言:js
AI代码解释
复制
const customWidgetList = ref([{
  type: 'el-color-picker',//组件的名称,需要全局注册(必须)
  label: '颜色选择',//左侧列表对应组件名称(必须)
  id: 'color',//生成id时的前缀(必须)
  isCustomWidget: true,//是否是自定义组件(必须且固定为true)
  isFormItem: true,//是否属于表单组件(必须)
  attributes: {//此处填写的属性会使用v-bind绑定到对应组件上
    hiden: false, //是否隐藏
    label: '颜色选择',//标签名称 (表单组件必须)
    labelWidth: '',//标签宽度 (表单组件必须)
    showLabel: true,// 显示标签 (表单组件必须)
    disabled: false,//是否禁用
    size: 'default',//组件尺寸
    showAlpha: true,//自定义组件的单独属性,需要在attributesConfig下单独配置属性编辑器
  },
  attributesConfig: {//属性的描述,部分属性已内置无需定义
    showAlpha: {
      label: '支持透明度选择',
      component: {//属性所使用的编辑器控件,需全局注册
        name: 'el-switch',//使用el-switch作为属性配置器
        bind: {// 对应配置器的v-bind属性
          activeText: '是',
          inactiveText: '否',
          inlinePrompt: true,
          activeValue: true,
          inactiveValue: false
        }
      }
    }
  },
  rules: [],//验证规则,如果是表单组件则必须且固定为[]
  events: {
    onChange: '',//内容改变
    onMounted: ''//组件创建
  }
},])

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Dooring可视化之从零实现动态表单设计器
之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。
徐小夕
2020/09/11
2.1K0
牛逼!大厂都在用的一款表单解决方案
前端开发中表单渲染是最为常见的工作,选择一款好的表单渲染插件就能大大地提升开发效率,今天就给大家介绍一款由飞猪团队退出的表单渲染器——FormRender
程序员老鱼
2023/09/20
8300
牛逼!大厂都在用的一款表单解决方案
从零设计可视化大屏搭建引擎
几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章, 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示, 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题, 详细介绍一下实现原理。
徐小夕
2022/02/09
1.4K0
从零设计可视化大屏搭建引擎
ZooTeam 拍了拍你,来看看如何设计动态化表单
对于 ToB 业务而言,随着业务的不断壮大,接入的客户逐渐增加,相同页面的差异化的需求越来越多,尤其是在表单层面,小到多一个字段少一个字段这种简单的需求,大到整个页面不变的只剩下一些基础字段。
政采云前端团队
2020/07/24
1.3K0
ZooTeam 拍了拍你,来看看如何设计动态化表单
从零开发可视化大屏制作平台(技术拆解版)
目前很多企业或多或少的面临“信息孤岛”问题,各个系统平台之间的数据无法实现互通共享,难以实现一体化的数据分析和实时呈现。
徐小夕
2024/03/18
6980
从零开发可视化大屏制作平台(技术拆解版)
基于EMP微前端解决方案搭建页面可视化编辑平台
公司各业务线经常会制作一些活动页面用于活动的推广营销,拉新留存,这类页面布局类似,需求高频,迭代快速,开发任务重复且消耗各方的沟通时间和人力。为了解决这些痛点提高人效,需要为业务提供一套简单易用,功能强大的可视化搭建平台
玖柒的小窝
2021/10/26
1.6K1
基于EMP微前端解决方案搭建页面可视化编辑平台
一个Vue表单的终极解决方案
我们在做项目过程中,要制作各种各样的表单,尤其是做后台管理系统,有大量的重复工作,今天大叔给大家推荐一款高效的 Vue 低代码表单工具 -- Variant Form。
永恒君
2023/02/20
2.4K0
一个Vue表单的终极解决方案
Dooring-Saas低代码技术详解
hello, 大家好, 我是徐小夕, 今天和大家分享一下基于 H5-Dooring零代码 开发的全新零代码搭建平台 Dooring-Saas 的技术架构和设计实现思路.
徐小夕
2023/09/18
3710
Dooring-Saas低代码技术详解
《前端那些事》从0到1开发动态表单
前沿:中后台应用中表单需求颇多,左手一个表单,右手又是一个表单,无穷无尽,如果用模版一个个来写,不单写起来费时费力,而且看起来也是天花乱坠,于是这个时候你会去设想,那有没有什么方式可以去替换琐碎的手写表单模版的方式呢?让表单是“配出来”的,而不是撸出来的,让你轻松解决 form 表单,也不再为表单而烦恼。答案就是:动态表单
树酱
2020/07/03
2.2K0
《前端那些事》从0到1开发动态表单
如何评价Dooring低代码/零代码搭建平台?
大家好, 我是徐小夕, 之前一直在分享可视化低代码的一些实践, 围绕 H5-Dooring 零代码搭建平台也输出了很多技术文章, 最近2.7.0 版本也顺利迭代完成, 这里详细分享一下 H5-Dooring 无代码搭建平台技术方案.
徐小夕
2022/09/27
1.2K0
如何评价Dooring低代码/零代码搭建平台?
表单&试卷零代码搭建平台正式上线,支持源码部署
之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:
徐小夕
2024/07/04
2280
表单&试卷零代码搭建平台正式上线,支持源码部署
中后台管理系统前端可视化低代码方式提效设计一
中后台管理类系统基本都是对数据的增删改查、上传下载等,最多也只是展示形式上的差异, 一般都是由:一块区域用来输入或选择进行调用接口进行查询,一个表格用于对查询出的数据进行展示以及每条数据的操作,一个或两个表单用于数据的添加或者修改,以及一块功能区域用于批量删除、导入、导出等等。这些功能简单且量大编写的再多也不能提升自生境界,纯粹的浪费生命,可谓是苦不堪言。一般可能想到的是cv大法,但是修改也是很痛苦的,因为经常会少改某些变量,在测试的时候又漏掉总是经常偷偷 fixed 也是一脸尴尬。所以我们决定使用可视化的方案来解决这些重复性的问题。
工具人
2022/12/16
1.2K0
可视化搭建平台的地图组件和日历组件方案选型
可视化搭建平台除了需要为用户提供简单便捷的操作方式之外, 还需要提供丰富的组件支持和组件扩展, 这样才能满足更多用户的业务需求.
徐小夕
2021/01/06
1.8K0
React form 表单组件的解决方案
一直以来,表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说,主要需要考虑以下三点:
IMWeb前端团队
2019/12/04
2.4K0
Formik:让用户体验更加出色的表单解决方案
hi, 大家好,我是徐小夕, 今天又到了我们的博学时间。今天和大家分享一款非常有价值的开源项目——Formik。
徐小夕
2024/04/19
6250
Formik:让用户体验更加出色的表单解决方案
开源低代码平台,JeecgBoot v3.7.1 大版本发布
JEECG
2024/09/12
4270
开源低代码平台,JeecgBoot v3.7.1 大版本发布
低代码平台的属性面板该如何设计?
在之前的如何设计实现 H5 营销页面搭建系统中,我对前端目前的低代码平台的设计中的一些问题做了一些阐述,但并没有深入到很细节的地方去展开探讨。接下来,我会对其中的一些实现细节通过几篇文章来依次分享。
前端森林
2022/04/28
1.3K0
低代码平台的属性面板该如何设计?
基于react/vue搭建一个通用的表单管理配置平台
熟悉我的朋友可能会知道,我一向是不写热点的。为什么不写呢?是因为我不关注热点吗?其实也不是。有些事件我还是很关注的,也确实有不少想法和观点。但我一直奉行一个原则,就是:要做有生命力的内容。
徐小夕
2020/05/08
1.4K0
基于react/vue搭建一个通用的表单管理配置平台
基于Vue,ElementUI开发的一款表单设计器
基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来
程序源代码
2019/07/05
2.9K0
基于Vue,ElementUI开发的一款表单设计器
6小时撸一个拖拽式表单生成低代码工具——leggo
因为老员工的离职,我接手了一个完全由表单组成的发布模块,之前我并没有看过业务源码。后续因为接入新的需求而冲进去维护这坨代码。注意我用了“坨”这个量词,你应该明白我在说什么。因为整个模块缺少顶层设计,导致维护成本极高,频频报bug。于是开始思考为什么不能通过拖拽直接生成和维护这些表单呢?于是leggo就此诞生,名字来源于乐高Lego,寓意像搭积木一样完成表单的设计。
玖柒的小窝
2021/09/24
1.3K0
6小时撸一个拖拽式表单生成低代码工具——leggo
推荐阅读
相关推荐
Dooring可视化之从零实现动态表单设计器
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档