可以直接復(fù)制，接口看后端
父頁面

	<schedules
					ref="schedulesRef"
					:dxbz="props.dxbz"
					:jdlx="props.jdlx"
					:woId="myWoId"
					:addendumList="formInline.addendumList"
					v-if="addendumShow"
					@addendum="addendum"
				></schedules>


ts
//定義附表顯示隱藏屬性
const addendumShow = ref(false);
const addendum = (val: any) => {
	formInline.value.addendumList = val;
};
保存操作
save(){
	//接收附表信息
		let scedulesData = schedulesRef.value.getScedulesData();
		//獲取附表Id值和附表值
		const controlIds = scedulesData.data.map((item: any) => {
			return {
				controlId: item.controlId,
				controlValue: item.controlValue ? item.controlValue.toString() : ""
			};
		});
		//賦值附表信息
		formInline.value.addendumList = controlIds || [];
		//賦值附表校驗(yàn)信息
		formInline.value.schedulesCheck = scedulesData.check;
}

子頁面文章來源地址http://www.zghlxwxcb.cn/news/detail-616780.html

<!-- 自定義附表 -->
<template>
	<div>
		<el-form
			:inline="true"
			:model="modelItems"
			:rules="rules"
			ref="ruleFormRef"
			:disabled="fbDisabled || route.query.isDisabled"
			label-width="130"
		>
			<el-row>
				<el-col :span="item.controlLayout == 'T2' ? 24 : 12" v-for="(item, index) in infoList" :key="index">
					<el-form-item :label="item.controlName" :prop="item.controlId">
						<el-input
							v-model="item.controlValue"
							placeholder="請輸入"
							:required="item.required == 'Y'"
							v-if="item.controlLayout == 'T1' || item.controlLayout == 'N1' || item.controlLayout == 'N2'"
						></el-input>
						<el-input
							v-model="item.controlValue"
							:required="item.required == 'Y'"
							placeholder="請輸入"
							v-if="item.controlLayout == 'T2'"
							type="textarea"
						></el-input>
						<el-select
							:required="item.required == 'Y'"
							v-model="item.controlValue"
							style="width: 100%"
							placeholder="請選擇"
							v-if="item.controlLayout == 'S1'"
						>
							<el-option v-for="item1 in item.optionItem" :key="item1.value" :label="item1.label" :value="item1.value" />
						</el-select>
						<el-select
							multiple
							:required="item.required == 'Y'"
							v-model="item.controlValue"
							style="width: 100%"
							placeholder="請選擇"
							v-if="item.controlLayout == 'S2'"
						>
							<el-option v-for="item1 in item.optionItem" :key="item1.value" :label="item1.label" :value="item1.value" />
						</el-select>
						<el-date-picker
							:required="item.required == 'Y'"
							v-model="item.controlValue"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="請選擇"
							v-if="item.controlLayout == 'D1'"
						/>
						<el-time-picker
							:required="item.required == 'Y'"
							v-model="item.controlValue"
							format="HH:mm:ss"
							value-format="HH:mm:ss"
							placeholder="請選擇"
							v-if="item.controlLayout == 'D2'"
						/>
						<el-date-picker
							:required="item.required == 'Y'"
							v-model="item.controlValue"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss"
							type="datetime"
							placeholder="請選擇"
							v-if="item.controlLayout == 'D3'"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script setup lang="ts">
import { loadConfDetail } from "@/api/interface/workManage/index";
import { loadAddendumConfDetail } from "@/api/modules/workManage/indexApi";
import type { FormInstance, FormRules } from "element-plus";
const route = useRoute();
//動(dòng)態(tài)表單model
const modelItems = ref({} as any);
//定義自定義表單數(shù)據(jù)
const infoList = ref<loadConfDetail[]>([]);
//工單id
const woId = ref("");
//接收父組件的值
interface Props {
	dxbz?: string;
	addendumList: any;
	jdlx?: string;
	woId?: string;
}
const props = defineProps<Props>();
const fbDisabled = ref(false);
//讀寫標(biāo)志為只讀或者接單類型為一線工程師時(shí)，表單不可編輯
if (props.dxbz == "0" || props.jdlx == "1") {
	fbDisabled.value = true;
}
//下拉框數(shù)據(jù)
interface options {
	label: string;
	value: string;
}
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
	controlValue: [{ required: true, message: "請輸入", trigger: ["blur", "change"] }]
});
const emit = defineEmits(["addendum"]);
//表單數(shù)據(jù)實(shí)現(xiàn)方法
const getInfo = () => {
	loadAddendumConfDetail(woId.value || props.woId).then(res => {
		const data = res.data || [];
		//將數(shù)據(jù)轉(zhuǎn)換成表單需要的格式
		data.forEach((item: loadConfDetail) => {
			item.controlValue = "";
			//下拉數(shù)據(jù)傳成數(shù)組顯示到頁面
			if (item.controlLayout == "S1" || item.controlLayout == "S2") {
				let arr: options[] = [];
				item.options.split(",").forEach((index: string) => {
					arr.push({ label: index, value: index });
				});
				item.optionItem = arr;
			}
			//如果是必填項(xiàng)，加入校驗(yàn)規(guī)則
			if (item.required == "Y") {
				rules[item.controlId] = [{ required: true, message: "", trigger: ["blur", "change"] }];
			}
		});
		infoList.value = data;
		emit("addendum", infoList.value);
		let addendumList = props.addendumList;
		//將附表數(shù)據(jù)賦值到表單
		infoList.value.forEach(e => {
			//如果是下拉框，將下拉框的值轉(zhuǎn)換成數(shù)組
			let arr = (addendumList || []).filter((i: any) => i.controlId == e.controlId);
			if (arr.length > 0) {
				if (e.controlLayout == "S2") {
					if (arr[0].controlValue != "" && arr[0].controlValue.length > 0) {
						e.controlValue = (arr[0].controlValue || "").split(",");
					} else {
						e.controlValue = [];
					}
				} else {
					e.controlValue = arr[0].controlValue;
				}
			}
		});
	});
};
getInfo();
//校驗(yàn)是否有必填項(xiàng)未填
const checkFun = () => {
	let l = infoList.value.filter(item => item.required == "Y" && (!item.controlValue || item.controlValue == ""));
	return l.length > 0;
};
//表單數(shù)據(jù)方法暴露給父組件
const getScedulesData = () => {
	return { data: infoList.value, check: checkFun() };
};
defineExpose({
	getScedulesData
});
</script>

到了這里，關(guān)于vue3 +element動(dòng)態(tài)表單實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！