您现在的位置是：首页 > 文章详情

form-create 2.5.11 发布，好用的 vue 动态表单组件

日期：2021-10-18点击：769收藏

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

文档 | GitHub | 示例 | 可视化表单设计器

支持 UI

element-ui
iview/view-design
ant-design-vue

2.5.11主要更新了以下内容:

新增 deep 配置项
优化允许 field 重复
优化 frame,upload组件, 允许禁用时预览
优化 json 解析
优化 value同步
修复 control 首次可能不生效问题
删除 helper 助手方法

更新记录

安装

根据自己使用的 UI 安装对应的版本

element-ui 版本

 npm i @form-create/element-ui

iview@2.x|3.x 版本

 npm i @form-create/iview

iview/view-design@4.x 版本

 npm i @form-create/iview4

ant-design-vue@1.5+ 版本

 npm i @form-create/ant-design-vue

快速上手

本文以element-ui为例

在 main.js 中写入以下内容：

 import Vue from 'vue' import ELEMENT from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import formCreate from '@form-create/element-ui' Vue.use(ELEMENT) Vue.use(formCreate)

生成表单

在线示例

 <template> <div id="app1"> <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create> </div> </template>

 export default { data() { return { //实例对象 fApi: {}, //表单数据 value: {}, //表单生成规则 rule: [ { type: 'input', field: 'goods_name', title: '商品名称' }, { type: 'datePicker', field: 'created_at', title: '创建时间' } ], //组件参数配置 option: { //表单提交事件 onSubmit: function (formData) { alert(JSON.stringify(formData)) } } } } }