mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +08:00
fix(form): row显隐不会触发
This commit is contained in:
parent
7d62c09c6b
commit
88cc033e0d
56
packages/form/src/containers/Col.vue
Normal file
56
packages/form/src/containers/Col.vue
Normal 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>
|
@ -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,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user