fix(form): fieldset checkbox chang事件不会触发

packages/form/src/containers/Fieldset.vue

@@ -4,25 +4,15 @@
     class="m-fieldset"
     :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
   >
-    <el-checkbox
+    <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
-      v-if="!show && name"
-      v-model="model[name].value"
-      :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
-      :true-label="1"
-      :false-label="0"
-      @change="change"
-      ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
-    ></el-checkbox>
-    <legend v-else-if="config.checkbox && name">
       <el-checkbox
         v-model="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-label="1"
         :false-label="0"
-        @change="change"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></el-checkbox>
-    </legend>
+    </component>
     <legend v-else>
       <span v-html="config.legend"></span>
       <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
@@ -62,77 +52,59 @@
   </fieldset>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, inject, watch } from 'vue';
 
 import { FieldsetConfig, FormState } from '../schema';
 
-export default defineComponent({
+const props = withDefaults(
-  name: 'm-form-fieldset',
+  defineProps<{
-
+    labelWidth?: string;
-  props: {
+    prop: string;
-    labelWidth: String,
+    size?: string;
-
+    model: Record<string, any>;
-    model: {
+    config: FieldsetConfig;
-      type: Object,
+    rules?: any;
-      default: () => ({}),
+  }>(),
-    },
+  {
-
+    rules: {},
-    config: {
+    prop: '',
-      type: Object as PropType<FieldsetConfig>,
-      default: () => ({}),
-    },
-
-    rules: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    prop: {
-      type: String,
-      default: () => '',
-    },
-
-    size: String,
   },
+);
 
-  emits: ['change'],
+const emit = defineEmits(['change']);
 
-  setup(props, { emit }) {
+const mForm = inject<FormState | undefined>('mForm');
-    const mForm = inject<FormState | undefined>('mForm');
 
-    const name = computed(() => props.config.name || '');
+const name = computed(() => props.config.name || '');
 
-    const show = computed(() => {
+const show = computed(() => {
-      if (props.config.expand && name.value) {
+  if (props.config.expand && name.value) {
-        return props.model[name.value]?.value;
+    return props.model[name.value]?.value;
-      }
+  }
-      return true;
+  return true;
-    });
-
-    const lWidth = computed(() => {
-      if (props.config.items) {
-        return props.config.labelWidth || props.labelWidth;
-      }
-      return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
-    });
-
-    const change = () => {
-      emit('change', props.model);
-    };
-
-    const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
-
-    return {
-      show,
-      name,
-      mForm,
-      lWidth,
-      key,
-      change,
-    };
-  },
 });
-</script>
 
-<style lang="scss"></style>
+const lWidth = computed(() => {
+  if (props.config.items) {
+    return props.config.labelWidth || props.labelWidth;
+  }
+  return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
+});
+
+const change = () => {
+  emit('change', props.model);
+};
+
+const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
+
+if (props.config.checkbox && name.value) {
+  watch(
+    () => props.model[name.value]?.value,
+    () => {
+      console.log(props.model);
+      emit('change', props.model);
+    },
+  );
+}
+</script>

packages/form/src/index.ts

@@ -95,7 +95,7 @@ const install = (app: App, opt: any) => {
   app.component(Form.name, Form);
   app.component(FormDialog.name, FormDialog);
   app.component(Container.name, Container);
-  app.component(Fieldset.name, Fieldset);
+  app.component('m-form-fieldset', Fieldset);
   app.component(GroupList.name, GroupList);
   app.component(Panel.name, Panel);
   app.component(Row.name, Row);

packages/form/src/theme/fieldset.scss

@@ -5,6 +5,10 @@ fieldset.m-fieldset {
   margin-bottom: 10px;
   min-inline-size: auto;
 
+  .el-checkbox {
+    height: 22px;
+  }
+
   legend {
     font-size: 14px;
     position: absolute;