fix: 修复Form组件设置了hidden还是会出现占位空白
This commit is contained in:
parent
eafb5075d5
commit
0f531fd1d0
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue