fix: #342

kailong321200875 · Oct 9, 2023 · 1c51221 · 1c51221
1 parent d543e56
commit 1c51221
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 6 deletions.
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
@@ -93,9 +93,6 @@ export default defineComponent({
     // element form 实例
     const elFormRef = ref<ComponentRef<typeof ElForm>>()
 
-    // useForm传入的props
-    const outsideProps = ref<FormProps>({})
-
     const mergeProps = ref<FormProps>({})
 
     const getProps = computed(() => {
@@ -124,8 +121,6 @@ export default defineComponent({
 
     const setProps = (props: FormProps = {}) => {
       mergeProps.value = Object.assign(unref(mergeProps), props)
-      // @ts-ignore
-      outsideProps.value = props
     }
 
     const delSchema = (field: string) => {

diff --git a/src/components/Search/src/Search.vue b/src/components/Search/src/Search.vue
@@ -117,11 +117,14 @@ const setProps = (props: SearchProps = {}) => {
   outsideProps.value = props
 }
 
+const schemaRef = ref<FormSchema[]>([])
+
 // 监听表单结构化数组，重新生成formModel
 watch(
   () => unref(newSchema),
   async (schema = []) => {
     formModel.value = initModel(schema, unref(formModel))
+    schemaRef.value = schema
   },
   {
     immediate: true,
@@ -241,7 +244,7 @@ const onFormValidate = (prop: FormItemProp, isValid: boolean, message: string) =
     hide-required-asterisk
     :inline="getProps.inline"
     :is-col="getProps.isCol"
-    :schema="newSchema"
+    :schema="schemaRef"
     @register="formRegister"
     @validate="onFormValidate"
   />

diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue
@@ -12,6 +12,86 @@ const { required } = useValidator()
 
 const { t } = useI18n()
 
+const treeSelectData = [
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1'
+          }
+        ]
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1'
+          }
+        ]
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+// 模拟远程加载
+const getTreeSelectData = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(treeSelectData)
+    }, 3000)
+  })
+}
+
 const schema = reactive<FormSchema[]>([
   {
     field: 'field1',
@@ -92,6 +172,16 @@ const schema = reactive<FormSchema[]>([
     field: 'field6',
     component: 'TimeSelect',
     label: t('formDemo.timeSelect')
+  },
+  {
+    field: 'field7',
+    label: `${t('formDemo.treeSelect')}`,
+    component: 'TreeSelect',
+    // 远程加载option
+    optionApi: async () => {
+      const res = await getTreeSelectData()
+      return res
+    }
   }
 ])
 

diff --git a/src/views/Components/Search.vue b/src/views/Components/Search.vue
@@ -13,6 +13,86 @@ const { t } = useI18n()
 const { searchRegister, searchMethods } = useSearch()
 const { setSchema, setProps, setValues } = searchMethods
 
+const treeSelectData = [
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1'
+          }
+        ]
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1'
+          }
+        ]
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+// 模拟远程加载
+const getTreeSelectData = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(treeSelectData)
+    }, 3000)
+  })
+}
+
 const schema = reactive<FormSchema[]>([
   {
     field: 'field1',
@@ -125,6 +205,16 @@ const schema = reactive<FormSchema[]>([
     field: 'field18',
     label: t('formDemo.input'),
     component: 'Input'
+  },
+  {
+    field: 'field19',
+    label: `${t('formDemo.treeSelect')}`,
+    component: 'TreeSelect',
+    // 远程加载option
+    optionApi: async () => {
+      const res = await getTreeSelectData()
+      return res
+    }
   }
 ])