vue3 +element动态表单实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 +element动态表单实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

可以直接复制，接口看后端
父页面

	<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 || [];
		//赋值附表校验信息
		formInline.value.schedulesCheck = scedulesData.check;
}

子页面文章来源地址https://www.toymoban.com/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();
//动态表单model
const modelItems = ref({} as any);
//定义自定义表单数据
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);
//读写标志为只读或者接单类型为一线工程师时，表单不可编辑
if (props.dxbz == "0" || props.jdlx == "1") {
	fbDisabled.value = true;
}
//下拉框数据
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"]);
//表单数据实现方法
const getInfo = () => {
	loadAddendumConfDetail(woId.value || props.woId).then(res => {
		const data = res.data || [];
		//将数据转换成表单需要的格式
		data.forEach((item: loadConfDetail) => {
			item.controlValue = "";
			//下拉数据传成数组显示到页面
			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;
			}
			//如果是必填项，加入校验规则
			if (item.required == "Y") {
				rules[item.controlId] = [{ required: true, message: "", trigger: ["blur", "change"] }];
			}
		});
		infoList.value = data;
		emit("addendum", infoList.value);
		let addendumList = props.addendumList;
		//将附表数据赋值到表单
		infoList.value.forEach(e => {
			//如果是下拉框，将下拉框的值转换成数组
			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();
//校验是否有必填项未填
const checkFun = () => {
	let l = infoList.value.filter(item => item.required == "Y" && (!item.controlValue || item.controlValue == ""));
	return l.length > 0;
};
//表单数据方法暴露给父组件
const getScedulesData = () => {
	return { data: infoList.value, check: checkFun() };
};
defineExpose({
	getScedulesData
});
</script>

到了这里，关于vue3 +element动态表单实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！