From 2069d53e9be24adec3c8d6717fd7317555bd9a52 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 02 七月 2024 23:02:51 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/comp/modal/Modal4.vue | 97 +++++++++++++++++++++++-------------------------
1 files changed, 46 insertions(+), 51 deletions(-)
diff --git a/src/views/demo/comp/modal/Modal4.vue b/src/views/demo/comp/modal/Modal4.vue
index 299f3cb..86dd6bb 100644
--- a/src/views/demo/comp/modal/Modal4.vue
+++ b/src/views/demo/comp/modal/Modal4.vue
@@ -6,14 +6,15 @@
@visible-change="handleVisibleChange"
>
<div class="pt-3px pr-3px">
- <BasicForm @register="registerForm" :model="model" />
+ <BasicForm @register="registerForm" :model="modelRef" />
</div>
</BasicModal>
</template>
-<script lang="ts">
- import { defineComponent, ref, nextTick } from 'vue';
- import { BasicModal, useModalInner } from '/@/components/Modal';
- import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+<script lang="ts" setup>
+ import { ref, nextTick } from 'vue';
+ import { BasicModal, useModalInner } from '@/components/Modal';
+ import { BasicForm, FormSchema, useForm } from '@/components/Form';
+
const schemas: FormSchema[] = [
{
field: 'field1',
@@ -33,53 +34,47 @@
},
},
];
- export default defineComponent({
- components: { BasicModal, BasicForm },
- props: {
- userData: { type: Object },
- },
- setup(props) {
- const modelRef = ref({});
- const [
- registerForm,
- {
- // setFieldsValue,
- // setProps
- },
- ] = useForm({
- labelWidth: 120,
- schemas,
- showActionButtonGroup: false,
- actionColOptions: {
- span: 24,
- },
- });
- const [register] = useModalInner((data) => {
- data && onDataReceive(data);
- });
-
- function onDataReceive(data) {
- console.log('Data Received', data);
- // 鏂瑰紡1;
- // setFieldsValue({
- // field2: data.data,
- // field1: data.info,
- // });
-
- // // 鏂瑰紡2
- modelRef.value = { field2: data.data, field1: data.info };
-
- // setProps({
- // model:{ field2: data.data, field1: data.info }
- // })
- }
-
- function handleVisibleChange(v) {
- v && props.userData && nextTick(() => onDataReceive(props.userData));
- }
-
- return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
+ const props = defineProps({
+ userData: { type: Object },
+ });
+ const modelRef = ref({});
+ const [
+ registerForm,
+ // {
+ // // setFieldsValue,
+ // // setProps
+ // },
+ ] = useForm({
+ labelWidth: 120,
+ schemas,
+ showActionButtonGroup: false,
+ actionColOptions: {
+ span: 24,
},
});
+
+ const [register] = useModalInner((data) => {
+ data && onDataReceive(data);
+ });
+
+ function onDataReceive(data) {
+ console.log('Data Received', data);
+ // 鏂瑰紡1;
+ // setFieldsValue({
+ // field2: data.data,
+ // field1: data.info,
+ // });
+
+ // // 鏂瑰紡2
+ modelRef.value = { field2: data.data, field1: data.info };
+
+ // setProps({
+ // model:{ field2: data.data, field1: data.info }
+ // })
+ }
+
+ function handleVisibleChange(v) {
+ v && props.userData && nextTick(() => onDataReceive(props.userData));
+ }
</script>
--
Gitblit v1.9.3