From e23fdf87e6c3bc6d42198b9309617195f2efd6c0 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 06 七月 2024 23:40:08 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/form/AdvancedForm.vue | 95 +++++++++++++++++++++++------------------------
1 files changed, 47 insertions(+), 48 deletions(-)
diff --git a/src/views/demo/form/AdvancedForm.vue b/src/views/demo/form/AdvancedForm.vue
index 4872698..c5f32cb 100644
--- a/src/views/demo/form/AdvancedForm.vue
+++ b/src/views/demo/form/AdvancedForm.vue
@@ -5,15 +5,14 @@
</CollapseContainer>
<CollapseContainer title="瓒呰繃3琛岃嚜鍔ㄦ敹璧凤紝鎶樺彔鏃朵繚鐣�2琛�" class="mt-4">
- <BasicForm @register="register1" />
+ <BasicForm @register="register1" @advanced-change="onAdvancedChange" />
</CollapseContainer>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
- import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container';
- import { PageWrapper } from '/@/components/Page';
+<script lang="ts" setup>
+ import { BasicForm, FormSchema, useForm } from '@/components/Form';
+ import { CollapseContainer } from '@/components/Container';
+ import { PageWrapper } from '@/components/Page';
const getSchamas = (): FormSchema[] => {
return [
@@ -148,48 +147,48 @@
},
];
}
- export default defineComponent({
- components: { BasicForm, CollapseContainer, PageWrapper },
- setup() {
- const [register] = useForm({
- labelWidth: 120,
- schemas: getSchamas(),
- actionColOptions: {
- span: 24,
- },
- compact: true,
- showAdvancedButton: true,
- });
- const extraSchemas: FormSchema[] = [];
- for (let i = 14; i < 30; i++) {
- extraSchemas.push({
- field: 'field' + i,
- component: 'Input',
- label: '瀛楁' + i,
- colProps: {
- span: 8,
- },
- });
- }
- const [register1] = useForm({
- labelWidth: 120,
- schemas: [
- ...getSchamas(),
- ...getAppendSchemas(),
- { field: '', component: 'Divider', label: '鏇村瀛楁' },
- ...extraSchemas,
- ],
- actionColOptions: {
- span: 24,
- },
- compact: true,
- showAdvancedButton: true,
- alwaysShowLines: 2,
- });
- return {
- register,
- register1,
- };
+ const [register] = useForm({
+ labelWidth: 120,
+ schemas: getSchamas(),
+ actionColOptions: {
+ span: 24,
},
+ compact: true,
+ showAdvancedButton: true,
});
+ const extraSchemas: FormSchema[] = [];
+ for (let i = 14; i < 30; i++) {
+ extraSchemas.push({
+ field: 'field' + i,
+ component: 'Input',
+ label: '瀛楁' + i,
+ colProps: {
+ span: 8,
+ },
+ });
+ }
+ const [register1] = useForm({
+ labelWidth: 120,
+ schemas: [
+ ...getSchamas(),
+ ...getAppendSchemas(),
+ { field: '', component: 'Divider', label: '鏇村瀛楁' },
+ ...extraSchemas,
+ ],
+ actionColOptions: {
+ span: 24,
+ },
+ compact: true,
+ showAdvancedButton: true,
+ alwaysShowLines: 2,
+ });
+
+ function onAdvancedChange(isAdvanced: boolean) {
+ console.log('isAdvanced: ' + isAdvanced);
+ if (isAdvanced) {
+ // do something
+ } else {
+ // do something
+ }
+ }
</script>
--
Gitblit v1.9.3