Vue3 el-form 二次封装示例

<template>
	<el-form ref="form" :model="props.model" :rules="props.rules" :label-width="props.labelWidth"
		:label-position="`${$store.state.app.device == 'desktop'?'left':'top'}`">
		<el-row>
			<template v-for="citem in proxy.$slots['default']()" :key="citem">
				<el-col :span="12" :xs="24"
					v-if="citem&&(typeof citem.children !== 'string')">
					<template v-if="citem.children">
						<component :is="citem"></component>
					</template>
					<template v-else>
						<component :is="citem"></component>
					</template>
					<!-- <slot></slot> -->
				</el-col>
			</template>
		</el-row>
	</el-form>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance(); // 获取实例中的proxy
	console.log(proxy.$slots['default']())
	const props = defineProps({
		model: Object,
		prop: {},
		rules: {},
		labelPosition: {
			type: String,
			values: ["left", "right", "top"],
			default: "right"
		},
		requireAsteriskPosition: {
			type: String,
			values: ["left", "right"],
			default: "left"
		},
		labelWidth: {
			type: [String, Number],
			default: ""
		},
		labelSuffix: {
			type: String,
			default: ""
		},
		inline: Boolean,
		inlineMessage: Boolean,
		statusIcon: Boolean,
		showMessage: {
			type: Boolean,
			default: true
		},
		validateOnRuleChange: {
			type: Boolean,
			default: true
		},
		hideRequiredAsterisk: {
			type: Boolean,
			default: false
		},
		scrollToError: Boolean,
		scrollIntoViewOptions: {
			type: [Object, Boolean]
		}
	});

	const resetFields = () => {
		proxy.$refs["form"].resetFields()
	}

	const validate = (a) => {
		proxy.$refs["form"].validate(a)
	}

	defineExpose({
		resetFields,
		validate,
	});
</script>
``