表单生成器基于（form-create-designer+ant design vue）

最新推荐文章于 2025-05-20 09:40:21 发布
原创 最新推荐文章于 2025-05-20 09:40:21 发布 · 991 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#form-create #jeecg-boot #vue3

本文介绍了如何在前端和后端分别使用Gitee上的资源，包括前端表单设计UI和后端接口，以及在开发过程中如何处理数据库导入、表单生成和注释前后台接口的操作步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果展示

在这里插入图片描述

1.源码地址：
前端：https://gitee.com/houshixin/form-design-ui
后端：https://gitee.com/houshixin/form-design-web
2.单独使用前端的时候就把请前后台的接口注释就可以
3.都启动的话：
1）.先导入数据库
在这里插入图片描述
2.表单生成器主要用到俩表
在这里插入图片描述
3.前端主要代码
在这里插入图片描述

Hou°
关注
使用ant-design-vue的Form表单
richest_qi的博客
06-22 2481
文章目录使用脚手架新建项目安装并导入ant-design-vue，使用Form组件修改main.ts修改App.vue修改Hello.vue启动应用，测试验证 使用脚手架新建项目 vue create antd-demo 所以，我们得到了这么一个项目，如下， 安装并导入ant-design-vue，使用Form组件 npm install --save ant-design-vue@next 修改main.ts import { createApp } from 'vue'; import App
基于vue的 表单设计器（拖拽生成表单）
m0_67394360的博客
03-06 3339
日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 码云仓库：form-generator: Element UI表单设计及代码生成器 演示地址：form-generator 安装依赖： npm install JS
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
简介 Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker 日期选择器 TimePicker 时间选择器 Cascader 级联选择器 InputNumber 数字输入框 Rate 评分 Upload 上传 ColorPicker 颜色选择器 使用 在单文件组件中引用 npm i vue-form-maker import VueFormMaker from 'vue-form-maker' import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; // 如需使用城市
activiti表单设计器_可拖拽布局的表单设计器新版发布，支持 Ant Design Vue
weixin_39856269的博客
11-25 1991
基于 Vue, ElementUI 开发的一款表单设计器，目前开源版本在 Github 获得星标 2.4k，在2020年开工之际，我们加入了对 Ant Design Vue 的支持，让使用Ant Design Vue 的项目也能够快速进行表单的开发，废话不多说，接下来我们来看看如何快速开发 Ant Design Vue 表单。主界面预览界面 设计表单在 表单设计官网平台 上设计好表单，在表单属性 ...
form-create-designer 组件扩展
最新发布
weixin_43048846的博客
05-20 390
在myFormCreat目录下添加主页面组件 fc-matrix-input.vue。添加矩阵填空配置 myFormCreat/components/matrix.js。自定义组件扩展，矩阵填空组件。
vue 中使用form-create 动态创建表单
weixin_38673922的博客
01-21 2983
form-create 和UI框架配合使用，目前支持3个常用的UI：ElementUI、Iview、Ant-design-vue 以ant-design-vue为例 form-create官网地址 form-create表单生成器说明文档 一、ant-design-vue 和form-create的安装 cnpm install ant-design-vue --save cnpm i @form-create/ant-design-vue 二、在项目根目录src目录下的 main.js文件 中配置a
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
`form-create`是一个专为Vue设计的工具，用于动态生成表单及自定义组件，使得构建复杂的表单场景变得简单。在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-...
vue_form_design:基于Vue3.0的表单设计器
03-16
Vue Form Design是一款基于Vue3.0的表单设计器，它允许开发者通过拖拽方式快速构建动态表单，大大简化了前端开发中的表单设计工作。 在Vue3.0中，核心更新包括Composition API、Suspense、Teleport等。Composition ...
Vue 表单生成器(Form Generator)made with Vuejs
随便乱写的笔记
04-28 7033
简介及使用教程 Vue 表单生成器(Form Generator)是一个基于Schema的表单生成器组件，可以基于Schema构建反应式表单。 Vue 表单生成器(Form Generator)提供21种字段类型，、也可以使用自定义字段进行扩展。生成的模板对Bootstrap友好，并且可以轻松自定义样式。 安装 Npm npm i vue-form-generator Yarn yarn add vue-form-generator 使用 全局引入 import VueFo..
vue-forminator:基于Vue.js模式的表单字段生成器
04-30
Vue-forminator Forminator是一个“没有魔力的”，可扩展的，可配置的，基于模式的表单域工厂。 import Vue from &#39;vue&#39; ; import Forminator from &#39;vue-forminator&#39; ; new Vue ( { render ( h ) { return ( < form > < Forminator xss=removed xss=removed> < / form > ) } , data ( ) { return { form : { } } } , computed : { schema => ( [
vueeleformgenerator是专为vueeleform开发的可视化表单设计工具
08-10
vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具, 让表单开发的效率更上一层楼
vue-form-generator：Vue.js的基于模式的表单生成器组件
02-06
Vue形式生成器 Vue.js的基于架构的表单生成器组件。 演示版 产品特点 基于模式的React形式 多对象编辑 21种字段类型 内置验证器 核心和完整捆绑包（压缩后分别为41kb和50kb） 自举友好模板 可定制的样式 可以使用自定义字段轻松扩展 ...等等 文献资料 依存关系 vue-form-generator在内部使用和 。 尽管内置字段不需要外部依赖关系，但可选字段可能需要其他库。 这些依赖关系分为两个阵营：jQuery或Vanilla。 您可以在两种风格中找到几乎相同的功能。 最后，您可以选择是否依赖jQuery。 您可以在每个特定组件下的官方找到有关依赖项的详细信息。
vue-form-builder:使用Vue.js和Element UI构建并生成表单源代码的拖放表单构建器平台（基于vue和element-ui实现的表单设计平台，生成Element UI的表单源代码）
03-23
形式生成器 简体中文| 简介 一个通过拖拽生成表单页面的平台，基于Vue.js和Element UI开发，并生成表单源代码（WYSIWYG），可以让表单开发简单而高效。 本项目在基础上二次开发，目的是生成表单的Element UI原始代码，然后将生成的源码放在项目中使用，代替手写表单的工作。 在线访问： 特性 可视化配置页面 提供布局布局，并采用flex实现对齐 一键生成代码，立即可运行 提供自定义组件满足用户自定义需求 提供功能强大的高级组件 国际化支持 生成元素UI表单源代码（方便开发者拖拽生成表单，复制源码到项目中快速开发） 提供早期数据接口，方便用户需要异步获取数据加载 支持表单验证 快速获取表单数据 支持 如果你发现了新的bug，或者有新的功能要求，请新建一个问题 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chro
[前端项目Overview]表单构建器vue-form-generator
警警的博客
11-06 1687
vue-form-generator` 支持多种字段类型，包括：- 文本输入（`input`）- 数字输入（`number`）- 下拉选择（`select`）- 复选框和单选按钮（`checkbox`, `radio`）- 日期选择（`date`）此外，`vue-form-generator` 还支持自定义字段类型。通过注册自定义组件，可以扩展生成器，满足更复杂的表单需求。例如，文件上传、富文本编辑器等复杂字段都可以通过自定义组件实现。
vue JSX实现一个通用表单生成器
SilentLand的博客
07-24 1515
项目中有大量的简易表单，使用组件将其封装起来提高工作效率该组件封装不适用于太具有个性化的表单使用冻结优化配置信息。
Vue 使用form-create-designer
03-22
<think>好的，我现在需要帮助用户了解如何在Vue中使用form-create-designer进行表单设计。首先，我需要回忆一下用户提供的引用内容，看看有哪些相关信息可以利用。 用户提到了三个引用，分别是关于form-create-designer-naiveui的介绍、在Vue中使用form-create动态创建表单，以及如何保存和回显设计器的规则。这些引用内容应该能帮助构建答案。 接下来，我需要按照用户的要求，确保回答结构清晰，分步骤解决问题，并保证真实性。同时，要遵循系统级指令，比如正确使用LaTeX格式，生成相关问题，并在引用处添加标识。 首先，我应该介绍form-create-designer的基本概念和安装步骤。安装部分需要提到npm或yarn安装，这应该是标准的流程。然后，需要给出一个基础使用示例，包括组件的引入和注册，以及如何在模板中使用。这部分可能需要参考引用[1]和[2]，因为引用[2]提到在Vue中使用form-create，而引用[1]是关于naiveui版本的组件。 接下来，保存和回显表单设计是关键部分。用户可能需要知道如何获取生成的规则并保存，以及如何加载已有的规则进行回显。这里需要引用引用[3]，因为它专门提到了保存规则和回显的方法。需要给出具体的代码示例，比如使用@change事件来获取规则，并使用setup中的函数来加载数据。 然后，需要提到如何与UI框架配合使用。根据引用[2]，form-create支持Ant-design-vue、ElementUI等，可能需要说明如何切换不同的UI框架，但用户的问题是关于form-create-designer，可能需要确认是否也需要相应的配置。这部分可能需要进一步的信息，但根据引用[1]，form-create-designer-naiveui是基于特定UI的，所以可能需要用户安装对应的UI框架。 最后，生成相关问题，这些问题应该围绕用户可能感兴趣的后续步骤，比如如何自定义组件、保存到数据库、验证规则、UI框架切换等。需要确保问题与主题相关，并且能引导用户进一步探索。 需要检查LaTeX的使用是否正确，比如行内公式是否用$...$，独立公式是否用$$...$$，但在这个问题中可能涉及较少数学内容，所以可能不需要太多公式，但如果有提到变量或配置参数，可能需要使用LaTeX。例如，如果提到某个配置对象的结构，可以用$...$包裹，但根据示例，可能不需要。 另外，回答需要使用中文，并且引用标识要自然添加在引用段落末尾，比如在提到保存规则时引用[^3]，在提到动态创建表单时引用[^2]。 现在，需要组织这些内容，确保每个步骤清晰，代码示例正确，并且引用正确。同时，要避免使用Markdown格式，但用户允许在代码块中使用，所以代码部分需要用```包裹。 可能需要注意的地方：用户问的是form-create-designer的使用教程，而引用[1]提到的是form-create-designer-naiveui，可能需要指出不同UI版本的区别，但可能只需要一般性的指导，因为具体UI框架的细节可能不同。 总结，回答的结构应该是： 1. 安装步骤 2. 基础使用示例 3. 保存和回显表单设计（引用[3]） 4. 与UI框架配合使用（引用[2]） 5. 注意事项 6. 相关问题 需要确保每个部分都有对应的代码示例和引用标注。同时，检查是否有遗漏的步骤，比如表单生成后的提交处理，但用户的问题可能更关注设计器的使用而非表单提交，所以可能不需要深入。 最后，生成的相关问题需要围绕教程的扩展，如自定义组件、保存到数据库、验证、UI框架切换、动态数据获取等。</think>### Vue form-create-designer 表单设计器使用教程 #### 1. 安装与基础配置 首先通过 npm 或 yarn 安装依赖： ```bash npm install @form-create/naive-ui @form-create/designer # 或 yarn add @form-create/naive-ui @form-create/designer ``` 在 Vue 组件中引入并注册表单设计器： ```vue <template> <form-designer ref="designer" @change="handleChange" /> </template> <script setup> import { FormDesigner } from &#39;@form-create/designer&#39;; import formCreate from &#39;@form-create/naive-ui&#39;; const handleChange = (rule) => { console.log(&#39;当前表单规则:&#39;, rule); }; </script> ``` #### 2. 保存与回显表单设计 通过监听 `@change` 事件获取实时生成的 JSON 规则，保存到数据库或本地存储： ```javascript // 保存规则 localStorage.setItem(&#39;formRule&#39;, JSON.stringify(rule)); ``` 回显时从存储中加载规则并初始化设计器： ```vue <script setup> import { onMounted, ref } from &#39;vue&#39;; const designer = ref(null); onMounted(() => { const savedRule = JSON.parse(localStorage.getItem(&#39;formRule&#39;)); if (savedRule) { designer.value.setRule(savedRule); } }); </script> ``` 该过程通过 `setRule` 方法实现表单配置还原[^3]。 #### 3. 与 UI 框架集成 form-create-designer 支持多种 UI 框架（如 NaiveUI、ElementUI）。需额外安装对应 UI 库并修改引入路径： ```javascript // 切换为 ElementUI 版本 import formCreate from &#39;@form-create/element-ui&#39;; ``` 动态表单渲染时需保持 UI 框架一致性。 #### 4. 注意事项 - 通过 `option` 属性可配置设计器布局和组件库 - 使用 `menu` 配置项可自定义工具栏按钮 - 生成的 JSON 规则包含表单验证逻辑，需配合渲染器使用 ```javascript // 示例：禁用导出按钮 <template> <form-designer :menu="{ exportJson: false }" /> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值