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

This commit is contained in:
kailong321200875 2024-01-10 10:21:36 +08:00
parent eafb5075d5
commit 0f531fd1d0
3 changed files with 28 additions and 22 deletions

View File

@ -230,7 +230,7 @@ export default defineComponent({
const { schema = [], isCol } = unref(getProps) const { schema = [], isCol } = unref(getProps)
return schema return schema
.filter((v) => !v.remove) .filter((v) => !v.remove && !v.hidden)
.map((item) => { .map((item) => {
// Divider // Divider
const isDivider = item.component === 'Divider' const isDivider = item.component === 'Divider'

View File

@ -79,7 +79,6 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
const schemaItem = crudSchema[i] const schemaItem = crudSchema[i]
// 判断是否隐藏 // 判断是否隐藏
if (!schemaItem?.search?.remove) {
const searchSchemaItem = { const searchSchemaItem = {
component: schemaItem?.search?.component || 'Input', component: schemaItem?.search?.component || 'Input',
...schemaItem.search, ...schemaItem.search,
@ -89,7 +88,6 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
searchSchema.push(searchSchemaItem) searchSchema.push(searchSchemaItem)
} }
}
return searchSchema return searchSchema
} }
@ -123,8 +121,6 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
const formItem = crudSchema[i] const formItem = crudSchema[i]
// 判断是否隐藏
if (!formItem?.form?.remove) {
const formSchemaItem = { const formSchemaItem = {
component: formItem?.form?.component || 'Input', component: formItem?.form?.component || 'Input',
...formItem.form, ...formItem.form,
@ -134,7 +130,6 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
formSchema.push(formSchemaItem) formSchema.push(formSchemaItem)
} }
}
return formSchema return formSchema
} }

View File

@ -126,6 +126,8 @@ const schema = reactive<FormSchema[]>([
field: 'field3', field: 'field3',
label: t('formDemo.radio'), label: t('formDemo.radio'),
component: 'RadioGroup', component: 'RadioGroup',
hidden: true,
value: '1',
componentProps: { componentProps: {
options: [ options: [
{ {
@ -143,7 +145,8 @@ const schema = reactive<FormSchema[]>([
field: 'field4', field: 'field4',
label: t('formDemo.checkbox'), label: t('formDemo.checkbox'),
component: 'CheckboxGroup', component: 'CheckboxGroup',
value: [], value: ['1'],
remove: true,
componentProps: { componentProps: {
options: [ options: [
{ {
@ -229,7 +232,8 @@ const {
setSchema, setSchema,
getComponentExpose, getComponentExpose,
getFormItemExpose, getFormItemExpose,
getElFormExpose getElFormExpose,
getFormData
} = formMethods } = formMethods
const changeLabelWidth = (width: number | string) => { 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) => { const formValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
console.log(prop, isValid, message) console.log(prop, isValid, message)
} }
setTimeout(async () => {
const formData = await getFormData()
console.log(formData)
}, 2000)
</script> </script>
<template> <template>