form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
文档 | GitHub | 示例 | 可视化表单设计器
支持 UI
- element-ui
- iview/view-design
- ant-design-vue
2.5.10主要更新了以下内容:
- 新增 支持通过插槽扩展组件, 例如自定义
inputNumber组件的渲染,通过type-input-number插槽扩展 (说明)
- 新增
form.title配置项, 全局配置,不生成组件的 label
- 增强
json 解析
- 增强
control 功能, 支持控制当前 rule 中规则的显示状态
{
value: 1,
rule: ['field1', 'field2']
}
不兼容项
示例:
通过插槽生成一个表单组件
<template>
<div>
<form-create :rule="rule" v-model="fApi" :option="options">
<template slot="type-field-component" slot-scope="scope">
<ElInput :value="''+scope.model.value" @input="(v)=>scope.model.callback(parseInt(v))" />
</template>
</form-create>
</div>
</template>
<script>
export default {
data(){
return {
fApi:{},
options:{
onSubmit: (formData)=>{
alert(JSON.stringify(formData))
},
},
rule:[
{
type:'fieldComponent',
field:'fieldComponent',
title:'自定义插槽',
value:100
}
]
}
}
}
</script>
scope数据结构
interface scope {
rule:Rule; //组件生成规则
prop:VNodeData; //on: 事件, props: 配置
children: Vnode[] //子级
model: { //定义field后才有
value: any; //表单组件 value
callback: (value:any)=>void; //表单组件 value 更新
};
};
安装
根据自己使用的 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))
}
}
}
}
}