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/DynamicForm.vue | 121 +++++++++++++++++-----------------------
1 files changed, 52 insertions(+), 69 deletions(-)
diff --git a/src/views/demo/form/DynamicForm.vue b/src/views/demo/form/DynamicForm.vue
index 80de8a4..1f3dbac 100644
--- a/src/views/demo/form/DynamicForm.vue
+++ b/src/views/demo/form/DynamicForm.vue
@@ -15,11 +15,10 @@
</CollapseContainer>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
- import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container/index';
- 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 schemas: FormSchema[] = [
{
@@ -138,7 +137,7 @@
componentProps: ({ formModel }) => {
return {
placeholder: '鍚屾f2鐨勫�间负f1',
- onChange: (e: ChangeEvent) => {
+ onChange: (e) => {
formModel.f2 = e.target.value;
},
};
@@ -178,69 +177,53 @@
},
];
- export default defineComponent({
- components: { BasicForm, CollapseContainer, PageWrapper },
- setup() {
- const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByField }] =
- useForm({
- labelWidth: 120,
- schemas,
- actionColOptions: {
- span: 24,
- },
- });
- const [register1] = useForm({
- labelWidth: 120,
- schemas: schemas1,
- actionColOptions: {
- span: 24,
- },
- });
- function changeLabel3() {
- updateSchema({
- field: 'field3',
- label: '瀛楁3 New',
- });
- }
- function changeLabel34() {
- updateSchema([
- {
- field: 'field3',
- label: '瀛楁3 New++',
- },
- {
- field: 'field4',
- label: '瀛楁4 New++',
- },
- ]);
- }
-
- function appendField() {
- appendSchemaByField(
- {
- field: 'field10',
- label: '瀛楁10',
- component: 'Input',
- colProps: {
- span: 8,
- },
- },
- 'field3',
- );
- }
- function deleteField() {
- removeSchemaByField('field11');
- }
- return {
- register,
- register1,
- schemas,
- setProps,
- changeLabel3,
- changeLabel34,
- appendField,
- deleteField,
- };
+ const [register, { updateSchema, appendSchemaByField, removeSchemaByField }] = useForm({
+ labelWidth: 120,
+ schemas,
+ actionColOptions: {
+ span: 24,
},
});
+ const [register1] = useForm({
+ labelWidth: 120,
+ schemas: schemas1,
+ actionColOptions: {
+ span: 24,
+ },
+ });
+ function changeLabel3() {
+ updateSchema({
+ field: 'field3',
+ label: '瀛楁3 New',
+ });
+ }
+ function changeLabel34() {
+ updateSchema([
+ {
+ field: 'field3',
+ label: '瀛楁3 New++',
+ },
+ {
+ field: 'field4',
+ label: '瀛楁4 New++',
+ },
+ ]);
+ }
+
+ function appendField() {
+ appendSchemaByField(
+ {
+ field: 'field10',
+ label: '瀛楁10',
+ component: 'Input',
+ colProps: {
+ span: 8,
+ },
+ },
+ 'field3',
+ );
+ }
+ function deleteField() {
+ removeSchemaByField('field11');
+ }
</script>
--
Gitblit v1.9.3