修改表单页面用例

src/components/form/AdvancedForm.vue

@@ -13,12 +13,12 @@ const formData = computed(() => {
   } else {
     const res = props.formData
     props.formConfig?.formItems.forEach(item => {
-      res.label = item.label
       item.group.forEach(element => {
         // 避免修改当前表单项value重置其他表单项的value
         res[element.name] = res[element.name] && element.value !== undefined ? res[element.name] : element.value
       })
     })
+    console.log(res)
     return res
   }
 })

src/views/form/Advanced.vue

@@ -20,12 +20,15 @@ const formConfig = reactive<AdvancedForm>({
           value: '',
           name: 'password',
           type: 'input',
+          props: {
+            type: 'password'
+          },
           rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
         },
         {
           label: '字段名',
           value: '',
-          name: 'name',
+          name: 'field',
           type: 'input',
           slots: [
             {
@@ -42,21 +45,19 @@ const formConfig = reactive<AdvancedForm>({
         {
           label: '用户名',
           value: '',
-          name: 'name',
-          type: 'input',
-          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+          name: 'name1',
+          type: 'input'
         },
         {
           label: '密码',
           value: '',
-          name: 'password',
-          type: 'input',
-          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+          name: 'password1',
+          type: 'input'
         },
         {
           label: '字段名',
           value: '',
-          name: 'name',
+          name: 'field1',
           type: 'input'
         }
       ]
@@ -67,21 +68,19 @@ const formConfig = reactive<AdvancedForm>({
         {
           label: '用户名',
           value: '',
-          name: 'name',
-          type: 'input',
-          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+          name: 'name2',
+          type: 'input'
         },
         {
           label: '密码',
           value: '',
-          name: 'password',
-          type: 'input',
-          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+          name: 'password2',
+          type: 'input'
         },
         {
           label: '字段名',
           value: '',
-          name: 'name',
+          name: 'field2',
           type: 'input'
         }
       ]
@@ -92,21 +91,19 @@ const formConfig = reactive<AdvancedForm>({
         {
           label: '用户名',
           value: '',
-          name: 'name',
-          type: 'input',
-          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+          name: 'nam3',
+          type: 'input'
         },
         {
           label: '密码',
           value: '',
-          name: 'password',
-          type: 'input',
-          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+          name: 'password3',
+          type: 'input'
         },
         {
           label: '字段名',
           value: '',
-          name: 'name',
+          name: 'field3',
           type: 'input'
         }
       ]
@@ -117,21 +114,19 @@ const formConfig = reactive<AdvancedForm>({
         {
           label: '用户名',
           value: '',
-          name: 'name',
-          type: 'input',
-          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+          name: 'name4',
+          type: 'input'
         },
         {
           label: '密码',
           value: '',
-          name: 'password',
-          type: 'input',
-          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+          name: 'password4',
+          type: 'input'
         },
         {
           label: '字段名',
           value: '',
-          name: 'name',
+          name: 'field4',
           type: 'input'
         }
       ]
@@ -142,21 +137,19 @@ const formConfig = reactive<AdvancedForm>({
         {
           label: '用户名',
           value: '',
-          name: 'name',
-          type: 'input',
-          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+          name: 'name5',
+          type: 'input'
         },
         {
           label: '密码',
           value: '',
-          name: 'password',
-          type: 'input',
-          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+          name: 'password5',
+          type: 'input'
         },
         {
           label: '字段名',
           value: '',
-          name: 'name',
+          name: 'field5',
           type: 'input'
         }
       ]
@@ -166,11 +159,11 @@ const formConfig = reactive<AdvancedForm>({
 
 const formData = reactive({})
 
-const create = () => {
-  console.log('保存的方法')
+const create = (data: any) => {
+  console.log(data)
 }
-const update = () => {
-  console.log('保存的方法')
+const update = (data: any) => {
+  console.log(data)
 }
 
 const proFormRef = ref<any>()

src/views/form/Basic.vue

@@ -26,6 +26,9 @@ const formConfig = reactive<BasicForm>({
       value: '',
       name: 'password',
       type: 'input',
+      props: {
+        type: 'password'
+      },
       rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
     },
     {
@@ -133,18 +136,24 @@ const formConfig = reactive<BasicForm>({
           name: 'default',
           alias: 'cDefault'
         }
-      ]
+      ],
+      events: {
+        change(item: any) {
+          console.log(item)
+          formConfig.formItems[0].value = undefined
+        }
+      }
     }
   ]
 })
 
 const formData = reactive({})
 
-const create = () => {
-  console.log('保存的方法')
+const create = (data: any) => {
+  console.log(data)
 }
-const update = () => {
-  console.log('保存的方法')
+const update = (data: any) => {
+  console.log(data)
 }
 
 const proFormRef = ref<any>()