perf: dynamic options demo

kailong321200875 · Jul 1, 2022 · 1acb4d7 · 1acb4d7
1 parent 4c5acbf
commit 1acb4d7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/views/Components/Form/RefForm.vue b/src/views/Components/Form/RefForm.vue
@@ -5,6 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
+import { getDictOneApi } from '@/api/common'
 
 const { required } = useValidator()
 
@@ -213,6 +214,19 @@ const verifyReset = () => {
   const elFormRef = unref(formRef)?.getElFormRef()
   elFormRef?.resetFields()
 }
+
+const getDictOne = async () => {
+  const res = await getDictOneApi()
+  if (res) {
+    unref(formRef)?.setSchema([
+      {
+        field: 'field2',
+        path: 'componentProps.options',
+        value: res.data
+      }
+    ])
+  }
+}
 </script>
 
 <template>
@@ -244,6 +258,10 @@ const verifyReset = () => {
 
     <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
     <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+
+    <ElButton @click="getDictOne">
+      {{ t('searchDemo.dynamicOptions') }}
+    </ElButton>
   </ContentWrap>
   <ContentWrap :title="`RefForm ${t('formDemo.example')}`">
     <Form :schema="schema" ref="formRef" />

diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue
@@ -6,6 +6,7 @@ import { useForm } from '@/hooks/web/useForm'
 import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
+import { getDictOneApi } from '@/api/common'
 
 const { required } = useValidator()
 
@@ -222,6 +223,20 @@ const formValidation = () => {
 const verifyReset = () => {
   unref(elFormRef)?.resetFields()
 }
+
+const getDictOne = async () => {
+  const res = await getDictOneApi()
+  if (res) {
+    const { setSchema } = methods
+    setSchema([
+      {
+        field: 'field2',
+        path: 'componentProps.options',
+        value: res.data
+      }
+    ])
+  }
+}
 </script>
 
 <template>
@@ -253,6 +268,10 @@ const verifyReset = () => {
 
     <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
     <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+
+    <ElButton @click="getDictOne">
+      {{ t('searchDemo.dynamicOptions') }}
+    </ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseForm ${t('formDemo.example')}`">
     <Form @register="register" />