67 lines
1.4 KiB
Vue
67 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-if="options && options.length"
|
||
|
|
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 "@/components/form_builder/form_items_renderer.vue";
|
||
|
|
|
||
|
|
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: "100px",
|
||
|
|
},
|
||
|
|
labelPosition: {
|
||
|
|
type: String,
|
||
|
|
default: "right",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
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>
|