Form Generator 表单JSON数据储存以及JSON回显表单

最新推荐文章于 2024-10-17 13:17:12 发布
最新推荐文章于 2024-10-17 13:17:12 发布
阅读量2.3k 收藏 3
点赞数
分类专栏： form generator扩展组件系列 (超级详细) 文章标签： elementui vue.js javascript 前端 开发语言 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_19991931/article/details/131961071
版权
本文介绍了form-generator，一个基于Element UI的表单设计工具，支持生成JSON表单并储存。讲解了如何储存和回显JSON数据，包括表单设计、运行逻辑和解析器的使用。解析器作为核心部分，方便地将JSON数据转化为实际表单。此外，文中还强调了render函数在vuejs框架中的重要性。

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

一、form-generator是什么？✨ ⭐️ 🌟 

form-generator的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零开始扩展每一个组件。

扩展主要包含Element UI中的卡片、步骤条、table列表、折叠面板、树形控件以及自定义组件等等10余个组件的详细扩展方法。

其中不包含子表单、表格布局。因为这两个组件涉及到的代码量实在很大，没办法写博文。感兴趣的小伙伴可以看看大概的效果form-generator扩展原生表格，element-table，子表单。

这一章只讲解如何在表单设计器设计完成以后调用后端接口储存JSON，后续根据接口查询回显对应设计的表单。

二

了解本专栏 订阅专栏 解锁全文
表单生成器：JSON 数据存储及 JSON 回显表单
TechChamp的博客
09-20 418
本文介绍了如何使用 HTML、CSS 和 JavaScript 创建一个简单的表单生成器，并将表单数据存储为 JSON。我们还演示了如何使用加载的 JSON 数据来回显表单。通过这种方式，您可以动态创建表单，并在需要时填充表单数据。
form-generator解析组件与数据回显
abc_ABC123A的博客
10-30 3807
1. 解析生成配置好的组件 a. 引入解析代码的组件 import Parser from 'form-gen-parser' b. 加入组件到需要展示的位置 <parser :form-conf="formConf"></parser> c. 把需要解析的内容放到formConf中去，需要是json数组对象，不是字符串 this.formConf = JSON.parse(your-formConf) 2. 数据回显 a. 准备数据源 this.formData b. 给f
JSON重新格式化之前Form Generator自定义表单生成组件的表单回显
h1165的博客
07-07 1664
JSON重新格式化之前Form Generator自定义表单生成组件的表单回显介绍新的改变其他功能项目链接 介绍 Form Generator JSON格式重写前的自定义表单回显组件,适配JSON格式还为更新前的框架数据 开发时遇到一个情况，由于框架比较老，发现自定义表单组件的框架用的是Form Generator组件JSON尚未格式化之前的版本，这就出现一个问题，新旧版本生成的JSON格式的表单数据不同，新版本的Form Generator可以使用官方自带的 parser插件，使用npm 安装。 其生
js-form-generator:从 json 和模板生成表单
06-14
js 表单生成器 从 json 和模板生成表单 生成的表单可以在本地存储中存储值 演示
json-obj-form-generator:从JSON对象生成表单
05-05
json-obj-form-generator 从JSON对象生成表单 安装 npm install --save json-obj-form-generator 有关更多信息，请查看有关沙箱（游乐场），设计师翻译生成器等的文档。 设计者的用法 import { JOFGENDesigner } from 'json-obj-form-generator' ; import 'bootstrap/dist/css/bootstrap.css' ; // most styles are from bootstrap library import 'json-obj-form-generator/dist/css/designer.css' ; ... render ( ) { return ( < JOFGENDesigner extende
动态生成form表单,不再为表单烦恼
weixin_33866037的博客
02-27 566
form-create 具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片上传等功能组件。 1.4.5版本已支持 iview3 Github | Gitee | Npm | form...
若依框架前端form-generator升级为最新版本，添加json解析器，将json配置解析为页面
03-01
总之，这次若依框架前端form-generator的升级和添加JSON解析器是一个涉及到多个技术层面的过程，包括但不限于JSON解析、前端组件升级、兼容性测试以及UI调整。这样的升级能够使开发团队利用更先进的工具，提高开发...
form-generator 表单设计
11-10
Element UI表单设计，将生成的代码直接运行在基于Element的vue项目中,也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 npm i form-gen-parser@1.0.3 npm install clipboard@2.0.4 --save npm install ...
前端使用Form Generator渲染后端自定义表单的json
元宝的博客
04-27 1541
1.在这里我们只需要在我们的vue项目中引入form-generator-dev（这个文件我放在了git中，直接git clone https://gitee.com/kjptop/form-generator.git就行，当然你也可以去官网下载）中的这几个文件就可以： 2.在你使用的vue页面中引入就可以了 <template> <div> <parser :form-conf="formConf" /> </div> </templat
form-generator扩展原生表格，element-table，子表单等组件
热门推荐
Etc.End的博客
06-10 2万+
的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。但form-generator提供组件并不能满足我们在项目中的使用，比如表格组件，el-table，子表单等等，在很多项目中会经常使用到。
js实现form表单自动回显功能
04-13
js实现form表单自动回显功能
form-generator：元素UI表单设计及代码生成器
02-06
简介 元素UI表单设计及代码生成器，可将生成的代码直接运行在基于元素的vue项目中；也可生成JSON表单，使用配套的解析器将JSON解析成真实的表单。 【】【】 【 】【】 友情链接 vue-admin-beautiful- vue-admin-beautiful- pl- 文件 系列教程： JSON解析器 将保存在数据库中的JSON表单，解析成真实的表单 // 安装 npm i form-gen-parser vscode插件 帮助使用元素UI的开发者完成基本的表单代码构建任务，减少重复的劳动。 vscode-plugin分支配套插件为： ；使用插件可快捷打开设计器，直接将代码
form-generator表单设计器api文档.docx
06-26
form-generator表单设计器api文档，用于设计自定义组件
[Form Generator][一期替代方案]调用接口数据到opitions
webfullstack的博客
08-07 1439
el-cascader的数据调用 设置新增私有属性 (private_: {assField: ‘’},) 需要每个组件里面都添加(位置组件config.js) // 选择型组件 【左面板】 export const selectComponents = [ { __config__: { private_: {assField: ''}, 新增控制层的代码 代码位置RightPanel.vue(可以使用全局搜索RightPanel找位置) <el-form-item
若依框架前端form-generator升级指南及Json解析增强
gitblog_09735的博客
10-17 850
若依框架前端form-generator升级指南及Json解析增强 【下载地址】若依框架前端form-generator升级指南及Json解析增强 本资源库致力于帮助若依框架用户将前端的form-generator组件升级至最新版本。此次升级不仅仅带来了版本的更新，更是特别加入了强大的Json解析器功能。通过这个增强版的...
form表单中的几个方法,数据回显,数据填充,重置表单
weixin_44134588的博客
12-17 6413
form表单中有些常用的方法,在很多ui组件库中也同样适用; 1 在form表单中进行数据回显,一般是采用initialValues方法, 在表单中直接写 <Form ref={this.formRef} initialValues={a!}> 其中a就是要被回显的数据源; 2 通过事件逻辑来修改某个表单项的值,可以使用setFieldsValue 例如:需求是需要点击按钮时,将被点击行的数据填充到表单中 此时给按钮添加点击事件: { title:
深入浅出form-generator扩展组件
weixin_44815800的博客
09-01 3501
全文6000字带你深入浅出form-generator扩展组件的思路和方法，绝对干货
循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储
三分恶的博客
11-24 1570
在我们一些系统里面，有时候会需要一些让用户自定义的数据信息，一般这些可以使用扩展JSON进行存储，不过每个业务表的显示项目可能不一样，因此需要根据不同的表单进行设计，然后进行对应的数据存储。本篇随笔结合基于Vue+Element实现动态表单的设计、数据录入存储的相关操作。
Form Generator 项目结构解读
Etc.End的博客
03-16 1495
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。同时欢迎各位小伙伴一起学习，一起成长WX:SH--TS。
form-generator的json转表单
最新发布
04-03
### 如何使用 form-generator 将 JSON 数据生成 HTML 表单 `form-generator` 是一款基于 `Element UI` 的表单生成工具，支持通过 JSON 配置动态生成表单。以下是关于如何将 JSON 转换为 HTML 表单的具体方法。 #### 工具依赖 为了实现 JSON 到 HTML 表单的转换，需要引入以下核心依赖项： - **Vue.js**: 作为前端框架提供响应式数据绑定能力。 - **Element UI**: 提供丰富的 UI 组件库来渲染表单控件。 - **form-generator 和 form-gen-parser**: 主要负责解析 JSON 并生成对应的表单结构[^3]。 #### 解析流程 1. **加载 JSON 数据** - 确保 JSON 数据遵循 `form-generator` 定义的标准格式[^2]。 - 如果 JSON 来自外部文件或接口，则可以通过 AJAX 请求获取并赋值给 Vue 实例中的变量。 2. **初始化 Vue 实例** 下面是一个简单的 Vue 初始化代码示例： ```javascript new Vue({ el: '#app', data() { return { formData: {}, // 存储表单提交的数据 jsonSchema: { // 加载的 JSON Schema fields: [ { type: 'input', field: 'username', title: '用户名' }, { type: 'select', field: 'gender', options: ['男', '女'], title: '性别' } ] } }; }, methods: { onSubmit() { console.log('表单数据:', this.formData); } } }); ``` 3. **渲染表单** 使用 `form-gen-parser` 或者内置的方法将 JSON 渲染到页面上。通常情况下，在模板部分会这样写： ```html <div id="app"> <!-- 动态生成表单 --> <form-generator :fields="jsonSchema.fields" v-model="formData"></form-generator> <!-- 提交按钮 --> <button @click.prevent="onSubmit">提交</button> </div> ``` 4. **安装必要的插件** 如果尚未安装相关 npm 包，请执行以下命令完成环境搭建： ```bash npm install element-ui vue-json-schema-form --save ``` 以上过程展示了从 JSON 数据到实际可用 HTML 表单的整体工作流[^4]。 --- #### 注意事项 - 在设计阶段应充分考虑用户体验，减少冗余字段显示。 - 对于复杂业务逻辑可借助条件渲染等功能增强灵活性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wait.End

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值