fix: 修复Form组件设置了hidden还是会出现占位空白

kailong321200875 · Jan 10, 2024 · 0f531fd · 0f531fd
1 parent eafb507
commit 0f531fd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
@@ -230,7 +230,7 @@ export default defineComponent({
       const { schema = [], isCol } = unref(getProps)
 
       return schema
-        .filter((v) => !v.remove)
+        .filter((v) => !v.remove && !v.hidden)
         .map((item) => {
           // 如果是 Divider 组件，需要自己占用一行
           const isDivider = item.component === 'Divider'

diff --git a/src/hooks/web/useCrudSchemas.ts b/src/hooks/web/useCrudSchemas.ts
@@ -79,16 +79,14 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
   for (let i = 0; i < length; i++) {
     const schemaItem = crudSchema[i]
     // 判断是否隐藏
-    if (!schemaItem?.search?.remove) {
-      const searchSchemaItem = {
-        component: schemaItem?.search?.component || 'Input',
-        ...schemaItem.search,
-        field: schemaItem.field,
-        label: schemaItem.search?.label || schemaItem.label
-      }
-
-      searchSchema.push(searchSchemaItem)
+    const searchSchemaItem = {
+      component: schemaItem?.search?.component || 'Input',
+      ...schemaItem.search,
+      field: schemaItem.field,
+      label: schemaItem.search?.label || schemaItem.label
     }
+
+    searchSchema.push(searchSchemaItem)
   }
 
   return searchSchema
@@ -123,17 +121,14 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
 
   for (let i = 0; i < length; i++) {
     const formItem = crudSchema[i]
-    // 判断是否隐藏
-    if (!formItem?.form?.remove) {
-      const formSchemaItem = {
-        component: formItem?.form?.component || 'Input',
-        ...formItem.form,
-        field: formItem.field,
-        label: formItem.form?.label || formItem.label
-      }
-
-      formSchema.push(formSchemaItem)
+    const formSchemaItem = {
+      component: formItem?.form?.component || 'Input',
+      ...formItem.form,
+      field: formItem.field,
+      label: formItem.form?.label || formItem.label
     }
+
+    formSchema.push(formSchemaItem)
   }
 
   return formSchema

diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue
@@ -126,6 +126,8 @@ const schema = reactive<FormSchema[]>([
     field: 'field3',
     label: t('formDemo.radio'),
     component: 'RadioGroup',
+    hidden: true,
+    value: '1',
     componentProps: {
       options: [
         {
@@ -143,7 +145,8 @@ const schema = reactive<FormSchema[]>([
     field: 'field4',
     label: t('formDemo.checkbox'),
     component: 'CheckboxGroup',
-    value: [],
+    value: ['1'],
+    remove: true,
     componentProps: {
       options: [
         {
@@ -229,7 +232,8 @@ const {
   setSchema,
   getComponentExpose,
   getFormItemExpose,
-  getElFormExpose
+  getElFormExpose,
+  getFormData
 } = formMethods
 
 const changeLabelWidth = (width: number | string) => {
@@ -300,6 +304,8 @@ const setValue = async (reset: boolean) => {
         }
       ]
     })
+    const formData = await getFormData()
+    console.log(formData)
   }
 }
 
@@ -396,6 +402,11 @@ const inoutValidation = async () => {
 const formValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
   console.log(prop, isValid, message)
 }
+
+setTimeout(async () => {
+  const formData = await getFormData()
+  console.log(formData)
+}, 2000)
 </script>
 
 <template>