diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index 347ea4f7e..44d63ea70 100644 --- 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>() - // useForm传入的props - const outsideProps = ref({}) - const mergeProps = ref({}) 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 index 2fe42ecc1..4f9a6fc75 100644 --- 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([]) + // 监听表单结构化数组,重新生成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 index c32116f9e..4f5927930 100644 --- 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([ { field: 'field1', @@ -92,6 +172,16 @@ const schema = reactive([ 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 index bc3e86045..c21d28ca8 100644 --- 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([ { field: 'field1', @@ -125,6 +205,16 @@ const schema = reactive([ 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 + } } ])