vue3.0使用form-create动态生成表单

安装

//element-plus 版本 npm i @form-create/element-ui@next //ant-design-vue@3.0 版本 npm i @form-create/ant-design-vue@next 

快速上手

import ElementUI from 'element-plus/es/index' import 'element-plus/dist/index.css' import formCreate from '@form-create/element-ui'  app.use(ElementUI) app.use(FormCreate) 

示例

<!--  * @Author: oneMiu  * @Date: 2022-05-17 14:33:56  * @LastEditors: oneMiu  * @LastEditTime: 2022-05-18 11:30:03  * @Desc:  -->  <template>  <section>   <FormCreate v-model="fApi" :rule="rule" :option="option" />  </section>
</template>
<script lang="ts">
	import { 
        
		defineComponent,
		ref,
		onMounted
	} from "vue";
	export default defineComponent({ 
        
		name: "FormCreateFoarmat",
		peops:["formJson"],
		setup(props,{ 
        emit}) { 
        
			let fApi = ref({ 
        })
			console.log(props.formJson)
			let rule = ref([{ 
        
					"type": "select", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)
					"field": "s705v90rbcg3", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置
					"title": "请假类型", // 组件的名称, 选填
					"info": "", //提示信息
					"effect": { 
        
						"fetch": ""
					},
					"props": { 
        
						// input的表单类型 ：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！

						// text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
						// button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
						// checkbox 定义复选框。
						// color 定义拾色器。
						// date 定义日期字段（带有 calendar 控件）
						// datetime 定义日期字段（带有 calendar 和 time 控件）
						// datetime-local 定义日期字段（带有 calendar 和 time 控件）
						// month 定义日期字段的月（带有 calendar 控件）
						// week 定义日期字段的周（带有 calendar 控件）
						// time 定义日期字段的时、分、秒（带有 time 控件）
						// email 定义用于 e-mail 地址的文本字段
						// file 定义输入字段和 "浏览..." 按钮，供文件上传
						// hidden 定义隐藏输入字段
						// image 定义图像作为提交按钮
						// number 定义带有 spinner 控件的数字字段
						// password 定义密码字段。字段中的字符会被遮蔽。
						// radio 定义单选按钮。
						// range 定义带有 slider 控件的数字字段。
						// reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
						// search 定义用于搜索的文本字段。
						// submit 定义提交按钮。提交按钮向服务器发送数据。
						// tel 定义用于电话号码的文本字段。
						// url 定义用于 URL 的文本字段。
						"clearable": true
					},
					"options": [{ 
        
							"value": "1",
							"label": "事假"
						},
						{ 
        
							"value": "2",
							"label": "调休"
						},
						{ 
        
							"label": "病假",
							"value": "3"
						},
						{ 
        
							"label": "年假",
							"value": "4"
						},
						{ 
        
							"label": "产假",
							"value": "5"
						},
						{ 
        
							"label": "陪产假",
							"value": "6"
						},
						{ 
        
							"label": "婚嫁",
							"value": "7"
						},
						{ 
        
							"label": "例假",
							"value": "8"
						},
						{ 
        
							"label": "丧假",
							"value": "9"
						},
						{ 
        
							"label": "哺乳假",
							"value": "10"
						}
					],
					"_fc_drag_tag": "select",
					"hidden": false,
					"display": true,
					"$required": ""
				},
				{ 
        
					"type": "datePicker",
					"field": "7su1moi7tfy8o",
					"title": "开始时间",
					"info": "",
					"props": { 
        
						"type": "datetime",
						"placeholder": "请选择开始时间"
					},
					"_fc_drag_tag": "datePicker",
					"hidden": false,
					"display": true,
					"$required": "请选择开始时间"
				},
				{ 
        
					"type": "datePicker",
					"field": "3wm1moi7vuyvt",
					"title": "结束时间",
					"info": "",
					"props": { 
        
						"type": "datetime",
						"placeholder": "请选择结束时间"
					},
					"_fc_drag_tag": "datePicker",
					"hidden": false,
					"display": true,
					"$required": "请选择结束时间"
				},
				{ 
        
					"type": "input",
					"field": "dyg1moi7xxx16",
					"title": "时长（小时）",
					"info": "",
					"props": { 
        
						"type": "number",
						"placeholder": "请输入时长",
						"readonly": true
					},
					"_fc_drag_tag": "input",
					"hidden": false,
					"display": true,
					"$required": "请输入时长"
				},
				{ 
        
					"type": "input",
					"field": "3qs1moi80lnhh",
					"title": "请假事由",
					"info": "",
					"props": { 
        
						"type": "textarea",
						"placeholder": "请输入请假事由",
						"rows": 3
					},
					"_fc_drag_tag": "input",
					"hidden": false,
					"display": true,
					"$required": ""
				}
			])
			let option = ref({ 
        
				// 显示重置表单按扭
				resetBtn: true,

				// 表单提交按扭事件
				onSubmit: formData => { 
        
					// alert(JSON.stringify(formData));

					// console.log("获取表单中的数据：", formData);
					emit('submitForm', formData)
					//按钮进入提交状态
					// this.fApi.btn.loading();

					//重置按钮禁用
					// this.fApi.resetBtn.disabled();

					//按钮进入可点击状态
					// this.fApi.btn.finish();
				}
			})
			//获取Form表单 model对象
			function getFormModelFn() { 
        
				console.log("Form表单 model对象：", this.fApi.model());
			}

			function getUserNameChange(e) { 
        
				this.$nextTick(() => { 
        
					this.rule[2].value = this.rule[0].value;
				});
				console.log(this.fApi.getValue("userName"));
			}
			onMounted(() => { 
        

			});
			return { 
        
				option,
				getFormModelFn,
				rule,
				fApi
			};
		},
	});
</script>
<style lang="less" scoped>
	.el-form { 
        
		padding: 20px 30px 20px 0;
		width: 100vw;
		height: 500px;
		overflow-y: scroll;
		height: calc(100vh - 100px);
		background-color: #fff;
	}
</style>