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)
return schema
.filter((v) => !v.remove)
.filter((v) => !v.remove && !v.hidden)
.map((item) => {
// Divider
const isDivider = item.component === 'Divider'

View File

@ -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

View File

@ -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>