根据后台接口动态生成表单

接口数据tempoa.js

const controls = {
	"code": 200,
	"data": {
		"res": [{
				"id": "Text-1680072241433",
				"control": "Text",
				"required": 0,
				"filed_name": "text",
				"filed_lable": "文本",
				"type": "",
				"option_key": []
			},
			{
				"id": "Textarea-1680072243015",
				"control": "Textarea",
				"required": 0,
				"filed_name": "text_area",
				"filed_lable": "多行文本",
				"type": "",
				"option_key": []
			},
			{
				"id": "Number-1680072245132",
				"control": "Number",
				"required": 0,
				"filed_name": "number",
				"filed_lable": "数字",
				"type": "",
				"option_key": []
			},
			{
				"id": "Money-1680072247162",
				"control": "Money",
				"required": 0,
				"filed_name": "amount",
				"filed_lable": "金额",
				"type": "",
				"option_key": []
			},
			{
				"id": "Date-1680072249182",
				"control": "Date",
				"required": 0,
				"filed_name": "date",
				"filed_lable": "日期",
				"type": "day",
				"option_key": []
			},
			{
				"id": "Date-1680072251129",
				"control": "Date",
				"required": 0,
				"filed_name": "datetime",
				"filed_lable": "日期+时间",
				"type": "hour",
				"option_key": []
			},
			{
				"id": "Selector-1680072254525",
				"control": "Selector",
				"required": 0,
				"filed_name": "select",
				"filed_lable": "单选",
				"type": "single",
				"option_key": [{
						"key": "option-1680072254525",
						"value": "选项1",
						"en_value": ""
					},
					{
						"key": "option-1680072254526",
						"value": "选项2",
						"en_value": ""
					}
				]
			}
		],
		"template_name": "测试获取模版详情"
	},
	"msg": "获取成功"
}
export default controls

使用实例

<template>
	<div class="app-container">
		<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<template v-for="(item, index) in ruleForm.form">
				<el-card class="box-card" :key="index" style="margin-bottom:12px;">
					<template v-for="(subitem,subindex) in item.table">
						{{subitem.type}}
						<el-form-item :label="`${subitem.label}`" :key="index+''+subindex"
							:prop="`${ruleForm.form[index].table[subindex].value}`">
							<el-input v-model="subitem.value" :placeholder="subitem.placeholder"></el-input>
						</el-form-item>
					</template>
					<el-col :span="24" style="display: flex;justify-content: center;margin-bottom:12px;"
						v-if="index > 0">
						<el-button type="danger" icon="el-icon-delete" circle
							@click="subtractHandle(index)"></el-button>
					</el-col>
				</el-card>
			</template>
			<el-form-item>
				<el-button type="primary" @click="plusHandle">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import controls from '@/utils/tempoa.js';
	export default {
		components: {

		},
		data() {
			return {
				ruleForm: {
					form: []
				},
			};
		},
		mounted() {
			const dataList = controls.data.res;
			console.log("[]", dataList)
			this.dealwithDataAPI(dataList).then(response => {
				console.log("[--]", response);
				this.ruleForm["form"] = response;
			})
		},
		methods: {
			/**
			 * 表单提交
			 * **/
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						console.log(this.ruleForm);
					}
				});
			},
			/**
			 * 重置表单
			 * **/
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			/**
			 * 新增明细
			 * **/
			plusHandle() {
				const dataList = controls.data.res;
				let tempTable = dataList.map(item => ({
					type: item.control,
					value: '',
					label: item.filed_lable,
					key: item.id,
					placeholder: item.filed_lable,
					config: item
				}))

				this.ruleForm["form"].push({
					label: "表单",
					table: tempTable
				})
			},
			/**
			 * 删除明显子项
			 * **/
			subtractHandle(subIndex) {
				console.log(subIndex);
				this.ruleForm.form.splice(subIndex, 1);
			},
			/**
			 * 处理数据用于页面展示
			 * **/
			dealwithDataAPI(dataList) {
				return new Promise((resolve, reject) => {
					if (dataList.length > 0) {
						const tempTable = dataList.map(item => ({
							type: item.control,
							value: '',
							label: item.filed_lable,
							key: item.id,
							placeholder: item.filed_lable,
							config: item
						}));

						const tempForm = [{
							label: '表单',
							table: tempTable
						}];
						resolve(tempForm)
					} else {
						reject([])
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped></style>