From 88cc033e0d893d0c4357d3d9c7dd11a2a272a865 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Sat, 7 May 2022 16:40:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20row=E6=98=BE=E9=9A=90=E4=B8=8D?=
 =?UTF-8?q?=E4=BC=9A=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Col.vue  | 56 +++++++++++++++++++++++++++
 packages/form/src/containers/Row.vue  | 32 +++++++--------
 packages/form/src/fields/Checkbox.vue |  4 +-
 3 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 packages/form/src/containers/Col.vue

diff --git a/packages/form/src/containers/Col.vue b/packages/form/src/containers/Col.vue
new file mode 100644
index 00000000..4e7718a9
--- /dev/null
+++ b/packages/form/src/containers/Col.vue
@@ -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>
diff --git a/packages/form/src/containers/Row.vue b/packages/form/src/containers/Row.vue
index 5964064a..a3f28cd5 100644
--- a/packages/form/src/containers/Row.vue
+++ b/packages/form/src/containers/Row.vue
@@ -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"
-        :config="col"
-        :prop="prop"
-        :label-width="config.labelWidth || labelWidth"
-        :expand-more="expandMore"
-        :size="size"
-        @change="changeHandler"
-      ></m-form-container>
-    </el-col>
+      :span="config.span || config.span || 24 / config.items.length"
+      :config="col"
+      :labelWidth="config.labelWidth || labelWidth"
+      :expandMore="expandMore"
+      :model="name ? model[name] : model"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    />
   </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,
     };
   },
diff --git a/packages/form/src/fields/Checkbox.vue b/packages/form/src/fields/Checkbox.vue
index 5a57b531..abd77dab 100644
--- a/packages/form/src/fields/Checkbox.vue
+++ b/packages/form/src/fields/Checkbox.vue
@@ -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) {