vue自定义表单生成器,可根据json参数动态生成表单

最新推荐文章于 2025-07-10 20:06:27 发布
最新推荐文章于 2025-07-10 20:06:27 发布
阅读量3.2k 收藏 19
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript json java ViewUI
原文链接：https://my.oschina.net/xaboy/blog/3065582
form-create是一个基于Vue的动态表单生成器，支持通过JSON或Maker生成表单，内置17种组件并允许自定义组件。它提供数据验证、双向绑定和事件扩展等功能。2.x版本带来了速度提升、体积减小、更易扩展和更少的bug。通过示例展示了如何安装、挂载、生成表单及自定义组件的使用。

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

介绍

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

文档 | github

功能

  • 自定义组件

    • 可生成任何Vue组件
    • 自带数据验证
    • 轻松转换为表单组件

  • 通过 JSON 生成表单

  • 通过 Maker 生成表单

  • 强大的API，可快速操作表单

  • 双向数据绑定

  • 事件扩展

  • 局部更新

  • 数据验证

  • 栅格布局

  • 内置组件17种常用表单组件

对比 1.x

  • 速度更快

  • 体积更小

  • 更强大的全局配置

  • 自定义组件更容易扩展

  • 更容易支持第三方 UI 库

  • 更少的 bug

示例

通过 JSON 创建表单

最低0.47元/天 解锁文章

200万优质内容无限畅学
chuxun9652
关注
vue自定义生成表单
xiaochouniu1的博客
03-16 1521
官方文档 https://www.yuque.com/ln7ccx/ntgo8q/dlqvcs 具体的组件看文档 效果图 依赖 在package.json 添加 "dependencies": { "form-making": "^1.2.10", //新增 "vue": "^2.5.2", "vue-router": "^3.0.1" }, 然后 npm i 2.在index.html(和package.json同一级)添加 <link rel="sty
vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
weixin_39808893的博客
12-20 1177
介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。功能自定义组件可生成任何Vue组件自带数据验证轻松转换为表单组件通过 JSON 生成表单通过 Maker 生成表单强大的API，可快速操作表单双向数据绑定事件扩展局部更新数据验证栅格布局内置...
vue如何实现自定义表单
热门推荐
静幽水
10-27 3万+
自定义表单是什么？ 自定义表单顾名思义就是由用户定义表单，由用户觉定标签和组件，决定要填写什么格式的数据，用过腾讯文档的收集表单的一定见过下面的页面，这就是自定义表单。 自定义表单能做什么？ 典型的使用场景是信息收集表单或者是投票表单，上面的图片会对应的生成下面的表单，由其他用户填写，从而达到收集数据的功能。 实现效果图： 效果图如下，可以自定义文本，数字，单选按钮，多选按钮，下拉框等组件： ...
如何实现 Vue 动态表单生成器（原理 + 实战）
2501_92234528的博客
06-06 1058
Vue 的插槽机制允许我们在组件内部预留一些位置，让使用者可以自定义插入内容。在动态表单生成器中，我们可以使用具名插槽，让用户自定义表单的提交按钮或其他特定的表单项。<template>-- 动态渲染表单项 -->/></div></slot></form>通过以上步骤，我们成功实现了一个 Vue 动态表单生成器。利用 Vue 的动态组件渲染、表单校验和插槽机制，我们可以根据不同的 JSON 配置动态生成表单，并对用户输入的数据进行校验。
vue自定义表单
weixin_42178050的博客
06-10 849
http://211.159.185.23/vue-drag-formdesign/
vue自定义表单设计器思路
acheng
03-14 4356
在Vue中，可以使用自定义组件实现表单设计器。自定义组件允许我们在Vue应用程序中创建可复用的组件。这些组件可以在多个Vue组件中使用，使我们能够将应用程序拆分成可维护的部分。为了实现表单设计器，我们将创建两个Vue组件：FormBuilder和FormRenderer。现在，我们已经了解了自定义表单设计器所需的两个Vue组件的功能。让我们开始实现它们。我们将使用Vue CLI创建一个新的Vue项目。在项目中，我们将创建两个Vue组件：FormBuilder和FormRenderer。
vue自定义表单生成
晴天有何特别
04-14 938
表单生成文字发得算比较晚吧，因为最近又开始使用vue开发项目，管理系统用表单表格相当多，还是简单写了一个使用vue+element-ui，提高开发速度，增加可维护性,减少页面代码量，使用json串的方式管理表单更方便,react的也写过，思路差不多，有不清晰的地方还请指出,完整版代码没必要放太多了 index.vue 归纳需要的表单组件接收一个数组，返回一个form对象（表单值） <!-- * @name:自定义表单生成 * @Author: 刘强 * @Date: 2021-04-13 14
vue自定义表单生成器form-create使用详解
10-16
Vue 自定义表单生成器 `form-create` 是一个强大的工具，它允许开发者根据 JSON 参数动态地生成表单，极大地简化了复杂表单的构建过程。`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据...
vue自定义表单布局
凌寒赋雪的博客
09-10 878
当项目无法满足实际业务需求时可以使用antd vue 原生布局具体用法参考。1.表单布局，一行两列。
vue3-form-wizard:Vue 3 Form Wizard是一个可配置的，完全可自定义的JSON表单生成器，可让开发人员轻松创建基于步骤的表单
05-11
Vue 3表单向导 介绍 Vue 3表单向导是一个JSON可配置，完全可自定义的表单生成器，使开发人员可以轻松创建基于步骤的表单。 通过指定JSON配置对象，可以轻松生成表单问题。 最终结果是基于步骤的表单，它将一次显示一个问题。 支持最常见的输入类型： 文字输入 文字区 下拉菜单（可过滤） 单选和多选选项列表 能够创建自己的自定义输入类型 特征 完全可定制的风格 逐步验证输入 自定义验证消息 能够查询API以获取列表选项 每个问题后的回调 目录 文献资料 目录 贡献准则 行为守则 错误和功能请求 版权和许可 入门 使用节点程序包管理器安装程序包： npm install @anivive/vue3-form-wizard 导入到您的组件中并添加到components键： import VueFormWizard from '@anivive/vue3-form-wizar
【自定义表单】vue2 和ant design vue的自定义表单组件
最新发布
m0_52704391的博客
07-10 265
本文介绍了一个自定义表单组件的实现方案，该组件支持三种模式：新增(add)、编辑(edit)和查看(view)。组件采用JSON数据格式与后端交互，表单字段的label、type和placeholder均可自定义。文章详细展示了HTML模板结构、关键JavaScript逻辑和样式设计，包括表单字段的动态增删、不同类型字段的差异化配置（如文本输入、下拉选择、文件上传等）、必填项验证等功能实现。组件通过props接收模式参数和初始数据，并提供了多种事件回调。该方案实现了高度可配置的表单模板管理，适用于多种业务场
vue自定义表单组件
weixin_43442667的博客
08-13 1642
vue自定义一个表单组件 <Form class="right-inline" ref="formInline" :model="formInline" :inline="inline" :rules="ruleInline" :label-position="right" :label-width="126"> <template v-for="(item, index) in formItem"> <Form-item :label="item.label" :
VUE使用form-create利用json生成表单
qq_31493411的博客
04-21 1459
首先安装form-create cnpm i @form-create/iview 配置main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import...
vue 根据后台返回json 动态生成表单_基于vue的简单权限管理实现总结
weixin_39934085的博客
11-23 2152
前言总结一种比较常见的权限控制方法，主要使用vue-router的addRoutes根据用户权限动态添加路由实现。本文主要在前端对权限进行配置。 主要是看过vue-element-admin后对前端权限设计的一些总结完整demo地址主要知识点vuevue-routervuexvue-cli基本项目项目结构 使用vue-cli生成项目目录结构├─public │ favicon.ico │...
基于Vue.js和Element UI框架的自定义表单Form组件
wangweiruning的博客
03-26 1727
一个基于Vue.js和Element UI框架的自定义表单Form组件。这个组件非常灵活，支持自定义类名、表单配置项、动态新增表单项、自定义事件绑定等高级功能。
vue下基于elementui自定义表单-后端数据设计篇
acheng
06-30 2687
{"applicant":"刘仪","department":"技术管理","startDate":"2022-11-01","startTime":"08:30","endTime":"12:30","meetRoom":"NO.4","title":"技術連絡","fd_1660786142984":"","fd_1661955389858":"","fd_1661955304719":"","id":4099124702193258500,"docNum":"HY20221008"}
vue 自定义表单验证器
逍湘子
08-05 2065
1.首先我们自己新建一个 validatorUtils.js 文件来存放我们项目中所有的校验器 内容可以是： /** * 校验使用: message: 自定义信息，extra: 对象, 额外传递的参数 */ /** * 是否必须 * @param {*} rule * @param {*} value * @param {*} callback */ export function validateRequire(rule, value, callback) { if (!value &a
Vue表单生成器：用JSON模式和自定义组件创建表单
使用“vue-form-json-schema”库的开发者可以期待一个基于JSON模式的Vue.js表单生成器，该生成器能够允许开发者完全控制表单行为，并且能够将任何Vue组件和HTML元素集成进表单系统中，实现高度自定义化的表单解决...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值