博客

form-create和UI框架配合使用，目前支持3个常用的UI：Ant-design-vue、ElementUI、iview、

以ant-design-vue为例

form-create官网地址



form-create表单生成器说明文档

一、ant-design-vue 和form-create的安装

	cnpm install ant-design-vue --save
	cnpm i @form-create/ant-design-vue

二、在项目根目录src目录下的 main.js文件 中配置ant-design-vue和form-create

	// 引入ant-design-vue UI框架
	import Antd from 'ant-design-vue'
	import 'ant-design-vue/dist/antd.css'
	
	//引入form-create 表单生成器
	import formCreate from "@form-create/ant-design-vue"
	
	Vue.use(Antd)
	Vue.use(formCreate)

三、基本使用

<template>
	<!-- 使用 <form-create></form-create> 标签创建表单 -->
		<form-create v-model="fApi" :rule="rule" :option="option"></form-create>
</template>

<script>
	export default {
		data() {
			return {
				//实例对象
				fApi: {},
				//表单数据
				value: {},
				//表单生成规则 
				rule: [],
				
				//组件参数配置
				option: {
					form:{
						hideRequiredMark: false,
						layout: 'horizontal',
						labelAlign: 'right',
						labelCol: {
							span: 4
						},
						wrapperCol: {
							span: 16
						},
					},
					
					// 提交按钮样式
					submitBtn:{
						type: 'primary',
						innerText: '确定',
					},
					//表单提交事件
					onSubmit: function(formData) {
						alert(JSON.stringify(formData));
					},
					// 重置按钮事件
					resetBtn: function() {},
				}
			};
		},
		methods:{

		},
		created() {
			this.rule = [{
				type: 'input',
				field: 'inputField',
				title: '商品名称',
				emit:['blur'],
				col: {
					md: {
						span: 12
					}
				},
			},{
				type: "select",
				field: "cate_id",
				title: "分类",
				value: ["104"],
				options: [{
						"value": "104",
						"label": "公园",
						"disabled": false
					},
					{
						"value": "105",
						"label": "动物园",
						"disabled": false
					},
					{
						"value": "106",
						"label": "植物园",
						"disabled": false
					},
				],
				props: {
					multiple: true,
					allowClear:true
				},
				col: {
					md: {
						span: 12
					}
				}
			}]
		}
	};
</script>

四、效果图