从JSON输入快速生成的动态表单 - 腾讯云开发者社区

文章/答案/技术大牛

发布

JSON生成表单form-create的使用

一、安装我使用的是element UI ,安装对应的UI版本 npm i @form-create/element-ui 在main.js引入并全局注册 import formCreate...如果需要加loading在外围的div的加 <div v-loading="loadingArr.dialogLoading" element-loading-text="保存中...return { i: 0, loadingArr: { dialogLoading: false }, // 实例对象 fApi: {}, //表单数据...value: {}, //表单生成规则 rule: [], // 组件参数配置 option: { // onSubmit...: formData => { // alert(JSON.stringify(formData)); // for (let key in this.value

2.2K4 0

uni-app的pages.json动态生成的方法

分享如何动态修改 uni-app 项目的 pages.json。 # 前言最近遇到一个需求：项目中某些功能不在需求清单内，需要藏掉某些 h5 页面的入口不再对部分用户开放。...# pages.json 介绍 pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。...由于 pages.json 文件在项目中是写死的，所以就无法动态配置页面入口了。 # 解决方法配置文件既然是写死的那怎么处理动态的页面配置需求呢？...当然是有办法的，我们可以选择在打包前根据自己的需求动态修改这个配置文件成为我们需要的样子就可以了。...本文所述方法只是提供一个思路，具体使用的时候可以结合自己的实际情况进行修改及扩展，比如我们可以把配置存放在数据库，脚本中通过接口拉取配置之后重新生成再进行打包等等。

4.7K2 1

您找到你想要的搜索结果了吗？

是的

没有找到

Excel VBA：快速生成由输入的字母代表的单词

我们可以在单元格中只输入这些代表字母，而让Excel自动输出完整的单词内容，如下图1所示。...图1 下面是完整的VBA代码： Private Sub Worksheet_Change(ByVal Target As Range) Dim alphCount As Integer...A中是代表字母，列B中是该字母代表的完整单词。...你可以根据你的情况修改或调整。这就像是一个字典，你输入内容后，Excel会自动帮你在字典中查找相应的内容，然后输出来。注意，代码位于相应的工作表模块中，使用了该工作表对象的Change事件。...注：有兴趣的朋友可以到知识星球App完美Excel社群下载本文配套示例工作簿。

1.1K2 0

动态生成 uniapp 配置文件 pages.json 的解决方案

动态生成 uniapp 配置文件 pages.json 的解决方案最近接手了一个基于 uniapp 的开发项目，我个人对于它能够使用同一套代码就能够开发 h5\app\小程序的强大功能表示非常钦佩。...但是其配置文件 pages.json 也让我十分郁闷，原因无他，只因其是写死 JSON 文件，在管理的时候是十分不便的。...在搜索了一些资料，期望可以用 pages.js 文件来替代 pages.json 配置文件（JS的动态能力，可以很方便的拆分路由配置），但是没有找到很好的解决方案。...一般这个用得比较少，所以这个我就不做额外的处理了。使用构建好这些代码之后，直接在命令行中运行 node router/build.js 就会在项目根目录中生成 pages.json 文件了。...这里需要说明的是，我这边项目是使用 hbuilder GUI界面生成的项目，所以根目录就是项目根目录。如果是使用的 CLI 工具生成的项目，上文中的根目录就变成了项目的 src 目录。

7.3K2 0

DataGrid连接Access的快速分页法——动态生成SQL语句

/// /// 每页要显示的记录的数目。... /// 要显示的页的索引。... /// 要显示的页的索引。... /// 要显示的页的索引。... /// 要显示的页的索引。

1K1 0

使用json配置文件自动生成网页表单控件页面，让面向业务的开发开归本质。

三、使用Json Schema自动生成网页表单页面原理先上效果图，下方红圈部分，为笔者打算在网页图表中，所开放出来的部分属性修改，使用上述提到的JSON Form库，直接通过写Json Schema后...四、使用Json配置生成网页表单窗体的开发优势所在除了上述展示的，使用纯配置的方式，仅需使用Json Schema文件，即可完成了整个网页表单的自动生成外，还有其他几点的优势，这里简单罗列下。...用户不能输入选择项以外的内容。...2、窗体表单用户填写好的数据，可轻松采集到位以下图中，点击提交后，整个表单将以一个json对象数据的方式返回，不用再一个个表单控件去查找用户输入的值。 ?...七、结语本文给大家分享了近期一路探索的关于json、json schema、自动化渲染网页表单等主题，文中大家看到的几个库，是笔者经比较试错后，从同类主题中，亲身试用并发现其可行性及价值点的。

2.6K3 0

vue3 element-plus 配置json快速生成form表单组件，提升生产力近600%（已在公司使用，持续优化中）

vue-qiankun/common/components/form/ form表单json配置生成器 1、在PC端日常的使用中，使用最多的莫过于表单和列表了，故此对table列表和form表单进行了统一的封装...，通过json配置就可以快速适配table列表和form表单。...B、根据不同的字段类型，分别对应子组件进行渲染 C、子组件根据不同的类型，以及配置的类型字段进行渲染和数据绑定 D、子组件可以设置必填项和rules表单验证规则 E、可以通过设置字段的值...I、 ...... ---- 先来一个完整的效果展示 1、form表单配置json { "formListItem": [ { "name": "name1",...10个字符以内的名称", // 占位文本提示 rows: 4, // 输入框行数 minlength: 100, // 最小输入长度 maxlength: 5000, //

6.1K1 2

Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件单列多列

一个成熟的表单表单表单，你已经长大了，你要学会：动态渲染支持单列、双列、多列支持调整布局支持表单验证支持调整排列（显示）顺序依据组件值显示需要的组件支持 item 扩展组件可以自动创建...实现动态渲染把表单需要的属性，统统放入json里面，然后用require（方便）或者aioxs（可以热更新）加载进来，这样就可以实现动态渲染了。...比如要实现公司信息的添加、修改，那么只需要加载公司信息需要的json即可。想要实现员工信息的添加、修改，那么只需要加载员工信息需要的json。...总之，加载需要的json即可，不需要再一遍一遍的手撸代码了。那么这个神奇的 json 是啥样子的呢？文件有点长，直接看截图，更清晰一些。 ? 另外还有几个附带功能：支持单行下的合并。...：【视频一】 https://www.zhihu.com/zvideo/1347091197660405760 依据用户的选择，显示对应的组件这个也是一个急需的功能，否则的话，动态渲染的表单控件适应性就会受到限制

4.7K2 1

组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form

组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form 背景近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下...，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。...组件基本信息组件：react-jsonschema-form 开源协议： Apache-2.0 license 内容本次分享的组件是用于从 JSON Schema 构建 Web 表单的 React...组件react-jsonschema-form，它能够使用JSON Schema以声明方式构建和自定义 Web 表单。...Chakra UI 具体使用方式如下： 1、安装 npm install @rjsf/core --save 2、导入依赖使用 import Form from "@rjsf/core"; 作为CDN提供的脚本

5.6K3 0

Prompt 工程进阶：从规则引擎到动态提示生成的智能交互革命

今天，咱们就一头扎进 Prompt 工程进阶的世界，探索从规则引擎到动态提示生成，这场改变智能交互的大变革。很多人可能好奇，规则引擎和动态提示生成到底是什么？它们对智能交互又有哪些影响？...动态提示生成系统先收集大量文本数据，训练模型。模型训练好后，接收用户输入，分析输入内容，提取关键信息，最后生成合适的提示。要是无法提取关键信息，就给出通用提示。...动态提示生成的应用场景相比规则引擎，动态提示生成在更多场景中展现出强大的优势。下面咱们看看它的具体应用。智能写作助手：写文章时，根据用户输入的主题和内容，实时生成写作思路和提示，帮助用户克服写作障碍。...动态提示生成简述动态提示生成的技术原理，以及与传统规则引擎的区别：动态提示生成基于自然语言处理和机器学习技术，通过对文本数据的学习，根据用户输入和上下文生成提示。...从规则引擎到动态提示生成，咱们一起见证了智能交互领域的创新与变革。希望大家通过这篇文章，对这两项技术有更深入的理解和掌握。技术的世界永无止境，相信大家在探索过程中，会有更多新的发现和收获。

3751 0

【WPSJS主题】使用json配置文件自动生成网页表单控件页面，让面向业务的开发开归本质。

1.7K2 0

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

WorkfoxFormGennerator 是一个基于 Vue 3 和 Element Plus 构建的动态表单生成与渲染库。它提供了灵活的表单设计与渲染功能，支持表单字段的动态管理和自定义组件渲染。...该项目主要面向需要自定义动态表单的开发者，支持表单设计、字段渲染、表单验证和数据交互等功能。...项目预览在线预览地址主要功能动态表单设计器 (Form Designer)：通过图形化界面设计表单，支持字段拖拽、表单布局自定义，方便用户快速构建表单。...表单渲染器 (Form Renderer)：通过 JSON 配置生成表单，支持动态展示设计好的表单，并且支持与后端 API 交互，获取表单数据或提交表单。...高度可配置：通过传入配置 JSON，可以自由配置字段、表单样式、验证规则、从后端接口获取选项数据等。技术栈Vue 3：响应式、灵活的前端框架。

5562 0

快速从C过度C++（一）：namespace，C++的输入和输出，缺省参数，函数重载

前言：本文章适合有一定C语言编程基础的读者浏览，主要介绍从C语言到C++过度，我们首先要掌握的一些基础知识，以便于我们快速进入C++的学习，为后面的学习打下基础。...输入（Input）使用std::cin和提取运算符>>从键盘读取数据。...文件输入使用std::ifstream从文件读取数据。...缺省参数的规则 2.1. 从右向左设置缺省参数缺省参数必须从右向左依次设置，不能跳过中间的参数。...默认值必须是常量或全局变量默认值不能是局部变量或动态计算的值。

3391 0

Java中的随机数生成：从范围字符串到动态区间应用

在Java里，随机数生成是常见的编程需求，下面为你介绍从范围字符串解析到动态区间应用的实现方法。...", e); } }}生成指定区间的随机数借助Java的Random类或者ThreadLocalRandom类，能够生成处于指定区间内的随机数：import java.util.Random...generateRandomUsingThreadLocalRandom(int min, int max) { return ThreadLocalRandom.current().nextInt(min, max + 1); }}动态区间应用示例下面是一个完整的示例...随机数生成：提供了两种生成随机数的方法，分别适用于单线程和多线程环境。输入验证：对输入的范围字符串进行验证，防止出现格式错误或者逻辑错误。异常处理：在解析范围字符串时，对可能出现的异常情况进行了处理。...你可以根据自身需求，对这些方法进行调整和扩展，从而满足不同的随机数生成需求。

1151 0

干货 | 携程动态表单DynamicForm的设计与实现

为了让开发人员更加专注于组件本身的逻辑处理，我们开发了DynamicForm动态表单配置系统，可以通过拖拽的方式，快速创建一个表单。...实现阶段2：动态表单1.0 乐高表单第二版使用的是半自动化表单，支持动态配置表单控件类型和表单校验等。配置面板如图：此版本的表单不支持可视化拖拽，控件自上而下顺序排列。...DynamicForm在乐高平台的应用为了应对乐高组件快速迭代的业务需求，必须研发出一种能够让组件属性快速得到应用的表单技术框架，这样以保证在组件新增属性时，无需进行新代码的开发，仅需通过简单的配置即可生成新的组件属性...这两个模块共用常规的基础组件如输入框，颜色选择等，还有一些基于业务扩展的复杂组件，例如热区选择，视频上传，数据聚合（JSON列表）等。...动态表单一个比较重要的点是需要解决JSON可视化配置，为此表单也开发了table列表式的JSON列表组件，子项的配置就基于嵌套表单实现配置字段，并且能够增删改查条目，excel导入，导出数据。

3.3K2 0

AMIS：百度开源的前端低代码神器，18.4k star 背后的开发效率提升利器

AMIS（前端低代码框架）是百度开源的低代码前端框架，基于纯 JSON 配置即可生成完整后台页面，包括表单、表格、图表、CRUD 列表，支持可视化拖拽编辑。...丰富 UI 组件库从常规表单控件到日志diff、文件上传、PDF预览、图表可视化等均有覆盖，提高开发效率。4....、国际化、主题定制、安全验证界面效果展示以下是 AMIS 渲染后的 UI 示例截图，并附对应配置分析：CRUD 列表：自动生成表格 + 操作按钮图表页面：支持 ECharts 渲染，配合 JSON 配置实现数据可视化复杂表单...：级联、多选、动态验证等常见需求一应俱全应用场景企业内部后台管理系统：用户管理、订单管理、权限分配等；数据分析与监控平台：实时图表、日志展示、模型监控接口；快速原型与业务验证：产品配置前端视图、测试交互流程...；CRM/ERP 数据录入系统：表单导入导出、审核流配置等；混合微前端系统：低代码配置 + 业务组件动态组合。

3070 0

Activiti工作流实战使用总结

很遗憾的是这个是Activiti无法做到的，也不太建议你为此对Activiti进行hack实现， Activiti中流程是流程定义的一个运行实例，流程一旦生成，节点是"静态地"按定义生成的并不能动态的增删...字段设置成json，由json扩展各实际条件，当发生TASK_CREATED事件时，动态解析json，再将此json中的配置与流程的变量运算得到实际处理人。...好了，在流程设计的时候这串json的输入将是返人类的，所以你还需要提供一个UI，按条件生成这串JSON，甚至更进一步，改进Modeler。...如果JAVA底子不好可以试试XJR快速开发框架的表单设计器，拖拽式表单开发，这种形式的开发，完全没有编程基础的人都可以利用这个组件来开发，开发完表单直接可以发布成菜单功能，无需编译就可以使用。...6.jpeg 可以体验一下XJR快速开发框架：采用主流的Activiti工作流引擎，遵循bpmn规范，可实现XML、Json一键导入导出，以及添加了人员动态选择、便捷式会签设置、便捷式任务委托设置、添加自定义表单

3.8K4 2

页面可视化配置搭建工具技术要点

对动态组件页面实现可视化组件编辑时, 可以只编辑组件树声明文件, 然后将组件树声明传入提前打包好的页面中进行渲染. 采用动态组件可以避免重新打包的耗时, 快速生成新页面....配置表单自动生成配置表单的作用是生成和约束 JSON 配置数据, 业界已有对 JSON 进行描述和自动生成表单的方案 — JSON Schema....按照 JSON Schema 规范对 JSON 数据进行描述, 可以动态渲染出配置表单; 且 JSON Schema 可以对编辑后的数据做格式校验, 避免编辑错误....图片来源: https://github.com/json-editor/json-editor JSON Schema 的语法并不是很精简, 云凤蝶的 Schema 语法等方案更简洁, 但是云凤蝶的语法没有开源的表单生成库支持...组件动态增减, 组件拖拽. 从页面模板快速生成业务页面. 模板工程/编辑器/后台服务解偶. 模板工程前端框架无关: 支持 vue 和 react 等.

3K3 0

开箱即用，5 个功能强悍的 JSON 神器！

GitHub：https://github.com/AykutSarac/jsonvisio.com 凭借这款工具，你可以快速捕捉到 JSON 中的错误信息，搜索节点，并且，还能使用不同布局来展开 JSON...简单来说，就是可通过 SQL 语句，快速查询 JSON、CSV、Excel、日志记录库等文件中的数据，并为之创建可视化图表。...快速生成表单通过上面几个项目，你应该能大概感知出 JSON 的灵活性与可扩展性有多强了。因此，基于这两大特点，国内有位开发者做了一款在线动态表单生成器：Form Create。...用户只需上传 JSON 数据，即可快速生成表单： GitHub：https://github.com/xaboy/form-create 生成的表单，可具备动态渲染、数据收集、验证和提交功能等功能。...另外还内置了 20 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

1.2K2 1

页面可视化搭建工具前生今世

如领取优惠券的页面, 运营、产品只要在表单中填入优惠券的 ID, 然后就快速生成领取该优惠券的页面, 不需要关心优惠券在页面上如何展示和被领取的具体逻辑....这类工具的可编辑单元为前端框架的组件, 这些组件需要开发并导入到页面可视化搭建工具中; 组件的渲染结果包含了多个 HTML 元素, 所以从生成页面的角度, 编辑出一个页面只需要组合组件, 可以较快速完成页面生成...理想的配置数据格式为 JSON, 因为其格式灵活, 前端友好; 理想的配置数据描述格式为 JSON Schema, 因为其支持表单动态生成和数据校验....配置表单生成采用 JSON Schema, 容易生成配置表单, 只要按照 JSON Schema 对 JSON 数据的描述, 可以动态渲染出配置表单....如配置表单自动生成工具 json-editor: 组件化组件是对 HTML 元素、元素布局和样式、业务逻辑的封装, 通过组件化的方式, 将页面的搭建转化为对组件的组合, 大大减低了运营页面生成的编辑工作量

9763 0

点击加载更多

JSON生成表单form-create的使用

uni-app的pages.json动态生成的方法

Excel VBA：快速生成由输入的字母代表的单词

动态生成 uniapp 配置文件 pages.json 的解决方案

DataGrid连接Access的快速分页法——动态生成SQL语句

使用json配置文件自动生成网页表单控件页面，让面向业务的开发开归本质。

vue3 element-plus 配置json快速生成form表单组件，提升生产力近600%（已在公司使用，持续优化中）

Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件单列多列

组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form

Prompt 工程进阶：从规则引擎到动态提示生成的智能交互革命

【WPSJS主题】使用json配置文件自动生成网页表单控件页面，让面向业务的开发开归本质。

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

快速从C过度C++（一）：namespace，C++的输入和输出，缺省参数，函数重载

Java中的随机数生成：从范围字符串到动态区间应用

干货 | 携程动态表单DynamicForm的设计与实现

AMIS：百度开源的前端低代码神器，18.4k star 背后的开发效率提升利器

Activiti工作流实战使用总结

页面可视化配置搭建工具技术要点

开箱即用，5 个功能强悍的 JSON 神器！

页面可视化搭建工具前生今世

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐