42 lines
1.4 KiB
Vue
42 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<el-form ref="formRef" :model="modelValue" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
|
||
|
|
<el-row :gutter="gutter">
|
||
|
|
<form-items-renderer v-model="modelValue" :options="options" :span="span">
|
||
|
|
<template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
|
||
|
|
<slot :name="name" v-bind="slotProps" />
|
||
|
|
</template>
|
||
|
|
</form-items-renderer>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useSlots, useTemplateRef } from "vue";
|
||
|
|
import FormItemsRenderer from "./form_items_renderer.vue";
|
||
|
|
import { ElForm, ElRow } from "element-plus";
|
||
|
|
import "element-plus/es/components/form/style/css";
|
||
|
|
import "element-plus/es/components/row/style/css";
|
||
|
|
|
||
|
|
const slots = useSlots();
|
||
|
|
defineOptions({
|
||
|
|
name: "AppFormBuilder",
|
||
|
|
});
|
||
|
|
defineProps({
|
||
|
|
options: { type: Array, required: true },
|
||
|
|
rules: { type: Object, default: () => ({}) },
|
||
|
|
gutter: { type: Number, default: 24 },
|
||
|
|
span: { type: Number, default: 0 },
|
||
|
|
labelWidth: { type: [Number, String], default: "120px" },
|
||
|
|
labelPosition: { type: String, default: "right" },
|
||
|
|
autoGenerateRequired: { type: Boolean, default: true },
|
||
|
|
});
|
||
|
|
const modelValue = defineModel({ type: Object, required: true });
|
||
|
|
const formRef = useTemplateRef("formRef");
|
||
|
|
defineExpose({
|
||
|
|
validate: (callback) => formRef.value.validate(callback),
|
||
|
|
resetFields: () => formRef.value.resetFields(),
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|