form-create 动态生成表单时提交和重置按钮自定义

一、效果图：

二、代码块：

<template>
	<div>
		<!-- 使用 <form-create></form-create> 标签创建表单 -->
		<form-create v-model="fApi" :rule="rule" :option="option"></form-create>
		
		<!-- 自定义 确定和取消按钮 -->
		<a-button @click="submit" type="primary">确定</a-button>
		<a-button @click="reset">取消</a-button>
	</div>

</template>

<script>
	export default {
		data() {
			return {
// ***********************************
				//实例对象
				fApi: {},
				//表单数据
				value: {},
				//表单生成规则 
				rule: [{
					type: 'input',
					field: 'inputField',
					title: '商品名称',
					emit:['blur'],
					col: {
						span:12
					}, 
					props: {
						type: "text",
						placeholder: "请输入商品名称",
				  }
				}],
				
				//组件参数配置
				option: {
					//表单整体显示规则配置
					form:{	
						hideRequiredMark: false,
						layout: 'horizontal',	//inline
						labelAlign: 'right',
						labelCol: {
							span: 4
						},
						wrapperCol: {
							span: 10
						},
					},
					// 是否显示提交按钮
					submitBtn:false,
					// 是否显示重置按钮
					resetBtn: false,

				}
			};
// ***********************************
		},
		methods:{
			// 提交
			submit(){
				this.fApi.submit((formData, fApi)=>{
					alert(JSON.stringify(formData))
				})
			},
			// 重置
			reset(){
				this.fApi.resetFields()
			},
		},
		created() {
		}
	};
</script>