vue3 +element动态表单实现

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

	<schedulesref="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;
}

子页面

<!-- 自定义附表 -->
<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-inputv-model="item.controlValue"placeholder="请输入":required="item.required == 'Y'"v-if="item.controlLayout == 'T1' || item.controlLayout == 'N1' || item.controlLayout == 'N2'"></el-input><el-inputv-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-selectmultiple: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>