form-create 插件使用

最新推荐文章于 2024-06-12 06:56:27 发布
最新推荐文章于 2024-06-12 06:56:27 发布
阅读量2.1k 收藏 8
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42080106/article/details/108880319
版权

概况

标题form-create具有动态渲染、数据收集、校验和提交功能的表单生成器。http://www.form-create.com/

背景

项目里因为表单较多 选择了动态创建表单
项目需要自定义表单，整个项目里面我觉得比较麻烦的是自定义表单部分跟后台对于数据结构的设计。

选择版本

@form-create/element-ui UI框架版本 JSON串进行动态表单配置

引入form-create

局部引入

import formCreate from "@form-create/element-ui"; 
import FormTable from "./formTable"; //自定义组件

组件注册：

  components: {
    FormTable: formCreate.component("FormTable", FormTable),//自定义组件的注册要在formCrete之前
    formCreate: formCreate.$form()
  },

动态表单JSON

在这里插入图片描述

自定义表单FormTable

自定义表单其实跟我们日常写vue组件没有什么不同，
在form-create中的使用自定义组件也就跟form-create其他组件比如checkbox、

最低0.47元/天 解锁文章
GIS全球联萌
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
基于vue的 表单设计器（拖拽生成表单）
m0_54854317的博客
03-02 2万+
日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 码云仓库：form-generator: Element UI表单设计及代码生成器 演示地址：form-generator 安装依赖： npm install JS
ajax-axios-url-form-serialize 插件
08-19
总之，`ajax-axios-url-form-serialize`插件简化了使用Axios处理表单数据的过程，使前端开发者能更专注于业务逻辑，而不是底层的数据序列化。在实际开发中，合理运用这类插件可以大大提高工作效率，减少出错的可能性...
Vue——formcreate表单设计器自定义组件实现(二)
小欣儿的专栏
08-04 3407
本次要实现的自定义组件是一个表格，表格在前端是个十分常见的组件，然而formcreate里面却没有内置，我翻了issues里面有大佬说可以直接用VxeTable来做，做不做内置都是一样的。于是沿着这个思路自己做了一番实践最终也实现了两个版本，一个是Element Table简易版，一个是VxeTable的高度定制。下面就具体说说实现方法，以及其中遇到的一些问题和解法。
Vue表单生成器form-create的使用详解
leilei__66的博客
07-08 1万+
form-create的使用 具有动态渲染、数据收集、校验和提交功能的表单生成器。 安装 CDN 引入 目前可以通过 unpkg.com/form-create 获取到最新版本的资源，在页面上引入 js 即可开始使用。 <!-- import Vue 2.5--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <!-- import iview 2.
使用 FormCreate 快速创建仿真页面
最新发布
Winfredzhang的博客
06-12 759
FcDesigner Pro在线演示 (form-create.com)FormCreate 是一个表单生成组件，支持通过 JSON 配置生成表单。它支持 ElementPlus、Ant-design-vue、Naive-ui、Arco-design 和 TDesign 等多个 UI 框架，并且支持生成任何 Vue 组件。FormCreate 提供了动态渲染、数据验证、自定义组件、双向数据绑定和可视化设计等功能。
Vue form-create的基本使用 和 自定义表单组件的数据通迅
热门推荐
沐枫
04-30 4万+
form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器。 轻松搞定 form 表单,让你不再为表单而烦恼form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。hidden、input、inputNumber、checkbox...
element 修改表单值后表单验证无效_vue结合form-create组件生成动态表单
weixin_39609423的博客
11-20 510
最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结...
vue2+element使用form-create绑定事件
qq_40596257的博客
12-18 962
vue2+element使用form-create绑定事件
form-create的:rule通过JSON动态生成，自定义组件实现复用
Thurmanwang的博客
12-30 1672
form-create的:rule通过JSON动态生成，自定义组件实现复用 <form-create :rule="formRule" :model="formData" ref="formData" ></form-create> 首先再data定义rule存储需要用到的组件库，formRule:[]为form-create动态创建表单规则 rule: [{ ...
vue-form-create:基于Vue3.0的表单设计器
04-17
vue-form-create基于 Vue3.0 + TS 的自定义...$ npm install vue-form-create --save$ yarn add vue-form-create浏览器引入在浏览器中使用 script 标签直接引入文件，并使用全局变量 formCreate。我们在 npm 发布包内
动态表单生成器插件form-create
06-01
【动态表单生成器插件form-create】是一个用于快速构建具有动态渲染、数据收集、验证和提交功能的表单工具。这个插件基于JavaScript和jQuery，尤其适合在Web应用程序中创建自定义化、灵活的用户输入界面。通过JSON...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-ele-form-generator可视化表单设计工具-其他
06-12
vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具，并且支持vscode 插件、cli 本地启动、在线设计多种...此设计器不是独立存在的，是依托于 vue-ele-form，在使用前请务必阅读 vue-ele-form 的文档。
form-step:Dcat Admin 分步表单扩展
05-09
在你的控制器中，定义一个使用 `Dcat\Admin\Form\Steps` 的 `create` 或 `edit` 方法： ```php use Dcat\Admin\Form\Steps; public function create(Content $content) { return $content ->title('新建...
应用开发平台集成表单设计器系列之3——整体集成思路及表单设计器功能深度了解
学海无涯，行者无疆
11-20 1375
平台需要实现自定义表单功能，作为低代码开发的一部分，通过技术预研和技术选型，选择form-create和form-create-designer这两个组件进行集成作为实现方案。通过深入了解和技术验证，确认了组件的功能能满足需求，具备良好的开放性和扩展性。 接下来，重点来说说整体设计。实际有个核心的问题需要先考虑清楚，即现有的开发平台低代码配置功能与表单设计器，二者的关系是什么样。思考后总结，主要有三种模式： 1.相互独立，分别用于不同的场景； 2.协作关系，现有配置功能进行初步配置，表单设计器在其基础上再进
使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能
浮白
03-14 3106
简介:这篇文章将告诉你如何使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能参考:http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function作者:puras签于现在网上多数的Fo
前后端交互数据格式之form-data和json
qq_46940224的博客
08-11 6477
前后端交互数据格式之form-data和json
el-upload实现自定义上传http-request
weixin_40565812的博客
08-15 1万+
elementUI的el-upload组件使用http-request自定义上传
文件上传 upload 组件 on-success 事件，添加自定义参数
grootbaby
06-27 3473
参数 "1" 就是添加的自定义参数。多个上传组件也可以传入下标来区分当前使用的 upload 组件是哪一个。
nuxt安装form-data
06-13
要在 Nuxt.js 中使用 form-data，你需要遵循以下步骤： 1. 首先，安装 form-data 和 axios： ``` npm install form-data axios ``` 2. 然后，在 Nuxt.js 项目中，创建一个 plugins/form-data.js 文件： ```js // plugins/form-data.js import FormData from 'form-data' export default ({ $axios }) => { $axios.create({ headers: { common: { 'Content-Type': 'multipart/form-data', }, }, transformRequest: [function (data, headers) { const formData = new FormData() for (const key in data) { formData.append(key, data[key]) } return formData }], }) } ``` 3. 在 nuxt.config.js 中引入该插件： ```js // nuxt.config.js export default { plugins: [ '@/plugins/form-data', ], } ``` 4. 最后，你可以在组件中使用 axios 发送包含文件的表单数据： ```js async submitForm() { const formData = new FormData() formData.append('file', this.file) formData.append('name', this.name) formData.append('email', this.email) try { const response = await this.$axios.post('/api/submit-form', formData) console.log(response.data) } catch (error) { console.error(error) } } ``` 注意，这里的 `Content-Type` 是 `multipart/form-data`，并且在 `transformRequest` 函数中将数据转换为 `FormData` 对象。 希望这个回答能够帮到你！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值