fix(form): row显隐不会触发

This commit is contained in:
roymondchen 2022-05-07 16:40:56 +08:00 committed by jia000
parent 7d62c09c6b
commit 88cc033e0d
3 changed files with 72 additions and 20 deletions

View File

@ -0,0 +1,56 @@
<template>
<el-col v-show="display && config.type !== 'hidden'" :span="span">
<m-form-container
:model="model"
:config="config"
:prop="prop"
:label-width="config.labelWidth || labelWidth"
:expand-more="expandMore"
:size="size"
@change="changeHandler"
></m-form-container>
</el-col>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType } from 'vue';
import { ChildConfig, FormState } from '../schema';
import { display as displayFunction } from '../utils/form';
export default defineComponent({
props: {
labelWidth: String,
expandMore: Boolean,
span: Number,
model: {
type: Object,
default: () => ({}),
},
config: {
type: Object as PropType<ChildConfig>,
default: () => ({}),
},
prop: String,
size: String,
},
emits: ['change'],
setup(props, { emit }) {
const mForm = inject<FormState | undefined>('mForm');
const changeHandler = () => emit('change', props.model);
return {
mForm,
display: computed(() => displayFunction(mForm, props.config.display, props)),
changeHandler,
};
},
});
</script>

View File

@ -1,21 +1,17 @@
<template> <template>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col <Col
v-for="(col, index) in config.items" v-for="(col, index) in config.items"
:style="!display(col) || col.type === 'hidden' ? 'display: none' : ''"
:key="col[mForm?.keyProp || '__key'] ?? index" :key="col[mForm?.keyProp || '__key'] ?? index"
:span="col.span || config.span || 24 / config.items.length" :span="config.span || config.span || 24 / config.items.length"
> :config="col"
<m-form-container :labelWidth="config.labelWidth || labelWidth"
:model="name ? model[name] : model" :expandMore="expandMore"
:config="col" :model="name ? model[name] : model"
:prop="prop" :prop="prop"
:label-width="config.labelWidth || labelWidth" :size="size"
:expand-more="expandMore" @change="changeHandler"
:size="size" />
@change="changeHandler"
></m-form-container>
</el-col>
</el-row> </el-row>
</template> </template>
@ -23,11 +19,14 @@
import { defineComponent, inject, PropType } from 'vue'; import { defineComponent, inject, PropType } from 'vue';
import { FormState, RowConfig } from '../schema'; import { FormState, RowConfig } from '../schema';
import { display as displayFunction } from '../utils/form';
import Col from './Col.vue';
export default defineComponent({ export default defineComponent({
name: 'm-form-row', name: 'm-form-row',
components: { Col },
props: { props: {
labelWidth: String, labelWidth: String,
expandMore: Boolean, expandMore: Boolean,
@ -58,9 +57,6 @@ export default defineComponent({
return { return {
mForm, mForm,
display(config: any) {
return displayFunction(mForm, config.display, props);
},
changeHandler, changeHandler,
}; };
}, },

View File

@ -43,7 +43,7 @@ export default defineComponent({
return props.config.activeValue; return props.config.activeValue;
} }
return 'true'; return undefined;
}), }),
inactiveValue: computed(() => { inactiveValue: computed(() => {
@ -55,7 +55,7 @@ export default defineComponent({
return props.config.inactiveValue; return props.config.inactiveValue;
} }
return 'false'; return undefined;
}), }),
changeHandler(value: number | boolean) { changeHandler(value: number | boolean) {