mirror of
				https://github.com/Tencent/tmagic-editor.git
				synced 2025-11-04 10:49:51 +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>
 | 
			
		||||
  <el-row :gutter="10">
 | 
			
		||||
    <el-col
 | 
			
		||||
    <Col
 | 
			
		||||
      v-for="(col, index) in config.items"
 | 
			
		||||
      :style="!display(col) || col.type === 'hidden' ? 'display: none' : ''"
 | 
			
		||||
      :key="col[mForm?.keyProp || '__key'] ?? index"
 | 
			
		||||
      :span="col.span || config.span || 24 / config.items.length"
 | 
			
		||||
    >
 | 
			
		||||
      <m-form-container
 | 
			
		||||
        :model="name ? model[name] : model"
 | 
			
		||||
      :span="config.span || config.span || 24 / config.items.length"
 | 
			
		||||
      :config="col"
 | 
			
		||||
      :labelWidth="config.labelWidth || labelWidth"
 | 
			
		||||
      :expandMore="expandMore"
 | 
			
		||||
      :model="name ? model[name] : model"
 | 
			
		||||
      :prop="prop"
 | 
			
		||||
        :label-width="config.labelWidth || labelWidth"
 | 
			
		||||
        :expand-more="expandMore"
 | 
			
		||||
      :size="size"
 | 
			
		||||
      @change="changeHandler"
 | 
			
		||||
      ></m-form-container>
 | 
			
		||||
    </el-col>
 | 
			
		||||
    />
 | 
			
		||||
  </el-row>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -23,11 +19,14 @@
 | 
			
		||||
import { defineComponent, inject, PropType } from 'vue';
 | 
			
		||||
 | 
			
		||||
import { FormState, RowConfig } from '../schema';
 | 
			
		||||
import { display as displayFunction } from '../utils/form';
 | 
			
		||||
 | 
			
		||||
import Col from './Col.vue';
 | 
			
		||||
 | 
			
		||||
export default defineComponent({
 | 
			
		||||
  name: 'm-form-row',
 | 
			
		||||
 | 
			
		||||
  components: { Col },
 | 
			
		||||
 | 
			
		||||
  props: {
 | 
			
		||||
    labelWidth: String,
 | 
			
		||||
    expandMore: Boolean,
 | 
			
		||||
@ -58,9 +57,6 @@ export default defineComponent({
 | 
			
		||||
 | 
			
		||||
    return {
 | 
			
		||||
      mForm,
 | 
			
		||||
      display(config: any) {
 | 
			
		||||
        return displayFunction(mForm, config.display, props);
 | 
			
		||||
      },
 | 
			
		||||
      changeHandler,
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
@ -43,7 +43,7 @@ export default defineComponent({
 | 
			
		||||
          return props.config.activeValue;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return 'true';
 | 
			
		||||
        return undefined;
 | 
			
		||||
      }),
 | 
			
		||||
 | 
			
		||||
      inactiveValue: computed(() => {
 | 
			
		||||
@ -55,7 +55,7 @@ export default defineComponent({
 | 
			
		||||
          return props.config.inactiveValue;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return 'false';
 | 
			
		||||
        return undefined;
 | 
			
		||||
      }),
 | 
			
		||||
 | 
			
		||||
      changeHandler(value: number | boolean) {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user