@aspire-ui/element-component-pro 1.0.3 → 1.0.5

package/dist/index.d.ts

@@ -50,6 +50,10 @@ declare const _default: {
             type: import('vue').PropType<"small" | "medium" | "large">;
             default: string;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -146,10 +150,6 @@ declare const _default: {
         afterFetch: {
             type: import('vue').PropType<(data: unknown) => unknown>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         searchInfo: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -220,6 +220,10 @@ declare const _default: {
             type: import('vue').PropType<"small" | "medium" | "large">;
             default: string;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -316,10 +320,6 @@ declare const _default: {
         afterFetch: {
             type: import('vue').PropType<(data: unknown) => unknown>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         searchInfo: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -376,6 +376,7 @@ declare const _default: {
     }, {
         loading: boolean;
         size: "medium" | "small" | "large";
+        immediate: boolean;
         rowKey: string;
         bordered: boolean;
         striped: boolean;
@@ -395,7 +396,6 @@ declare const _default: {
             fullScreen?: boolean;
         };
         fetchSetting: import('./ProTable').FetchSetting;
-        immediate: boolean;
     }, true, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import('vue').ExtractPropTypes<{
         api: {
             type: import('vue').PropType<(params: Record<string, unknown>) => Promise<{
@@ -431,6 +431,10 @@ declare const _default: {
             type: import('vue').PropType<"small" | "medium" | "large">;
             default: string;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -527,10 +531,6 @@ declare const _default: {
         afterFetch: {
             type: import('vue').PropType<(data: unknown) => unknown>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         searchInfo: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -635,6 +635,10 @@ declare const _default: {
             type: import('vue').PropType<"small" | "medium" | "large">;
             default: string;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -731,10 +735,6 @@ declare const _default: {
         afterFetch: {
             type: import('vue').PropType<(data: unknown) => unknown>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         searchInfo: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -805,6 +805,10 @@ declare const _default: {
             type: import('vue').PropType<"small" | "medium" | "large">;
             default: string;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -901,10 +905,6 @@ declare const _default: {
         afterFetch: {
             type: import('vue').PropType<(data: unknown) => unknown>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         searchInfo: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -995,6 +995,7 @@ declare const _default: {
     }, string, {
         loading: boolean;
         size: "medium" | "small" | "large";
+        immediate: boolean;
         rowKey: string;
         bordered: boolean;
         striped: boolean;
@@ -1014,7 +1015,6 @@ declare const _default: {
             fullScreen?: boolean;
         };
         fetchSetting: import('./ProTable').FetchSetting;
-        immediate: boolean;
     }> & {
         props: {
             api: {
@@ -1051,6 +1051,10 @@ declare const _default: {
                 type: import('vue').PropType<"small" | "medium" | "large">;
                 default: string;
             };
+            immediate: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
             rowSelection: {
                 type: import('vue').PropType<{
                     type?: "checkbox" | "radio";
@@ -1147,10 +1151,6 @@ declare const _default: {
             afterFetch: {
                 type: import('vue').PropType<(data: unknown) => unknown>;
             };
-            immediate: {
-                type: import('vue').PropType<boolean>;
-                default: boolean;
-            };
             searchInfo: {
                 type: import('vue').PropType<Record<string, unknown>>;
             };
@@ -1354,6 +1354,9 @@ declare const _default: {
         schemas: {
             type: import('vue').PropType<import('./types').ProFormSchema[]>;
         };
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+        };
         initialValues: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -1463,6 +1466,9 @@ declare const _default: {
         schemas: {
             type: import('vue').PropType<import('./types').ProFormSchema[]>;
         };
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+        };
         initialValues: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -1524,6 +1530,7 @@ declare const _default: {
         submit: (values: Record<string, unknown>) => void;
         reset: () => void;
         register: (formAction: import('./types').FormActionType) => void;
+        "update:modelValue": (values: Record<string, unknown>) => void;
     }, {
         showActionButtonGroup: boolean;
         showSubmitButton: boolean;
@@ -1595,6 +1602,9 @@ declare const _default: {
         schemas: {
             type: import('vue').PropType<import('./types').ProFormSchema[]>;
         };
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+        };
         initialValues: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -1717,6 +1727,9 @@ declare const _default: {
         schemas: {
             type: import('vue').PropType<import('./types').ProFormSchema[]>;
         };
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+        };
         initialValues: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -1826,6 +1839,9 @@ declare const _default: {
         schemas: {
             type: import('vue').PropType<import('./types').ProFormSchema[]>;
         };
+        modelValue: {
+            type: import('vue').PropType<Record<string, unknown>>;
+        };
         initialValues: {
             type: import('vue').PropType<Record<string, unknown>>;
         };
@@ -1900,6 +1916,7 @@ declare const _default: {
         submit: (values: Record<string, unknown>) => void;
         reset: () => void;
         register: (formAction: import('./types').FormActionType) => void;
+        "update:modelValue": (values: Record<string, unknown>) => void;
     }, string, {
         showActionButtonGroup: boolean;
         showSubmitButton: boolean;
@@ -1972,6 +1989,9 @@ declare const _default: {
             schemas: {
                 type: import('vue').PropType<import('./types').ProFormSchema[]>;
             };
+            modelValue: {
+                type: import('vue').PropType<Record<string, unknown>>;
+            };
             initialValues: {
                 type: import('vue').PropType<Record<string, unknown>>;
             };
@@ -2036,6 +2056,7 @@ declare const _default: {
             schema: {
                 field: string;
                 label: string;
+                labelWidth?: string | undefined;
                 component?: (import('./types').ProFormBuiltInComponent | import('./types').ProFormCustomComponent) | undefined;
                 componentProps?: (Record<string, unknown> | ((params: import('./types').RenderCallbackParams & {
                     formActionType?: import('./types').FormActionType;

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-1b2d6c42],.ecp-table-action__item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-1b2d6c42]{margin-right:4px}.ecp-table-action__more[data-v-1b2d6c42]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__help-icon[data-v-0dcbe9b0]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-0dcbe9b0]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-0dcbe9b0]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-0dcbe9b0]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-4ee1cb87]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-4ee1cb87]{margin-bottom:16px}.ecp-pro-form_col[data-v-4ee1cb87]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-4ee1cb87]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-4ee1cb87]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-4ee1cb87]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}
+.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-f319e73a],.ecp-table-action__item[data-v-f319e73a]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-f319e73a]{margin-right:4px}.ecp-table-action__more[data-v-f319e73a]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-f319e73a]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__help-icon[data-v-84880e9d]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-84880e9d]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-84880e9d]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-84880e9d]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-6171d80d]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-6171d80d]{margin-bottom:16px}.ecp-pro-form_col[data-v-6171d80d]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-6171d80d]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-6171d80d]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-6171d80d]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}

package/dist/types/index.d.ts

@@ -50,6 +50,7 @@ export type FormListeners = Record<string, ((...args: unknown[]) => unknown) | (
 /** ProForm Props */
 export interface ProFormProps {
     schemas?: ProFormSchema[];
+    modelValue?: Record<string, unknown>;
     initialValues?: Record<string, unknown>;
     labelWidth?: string;
     labelPosition?: 'left' | 'right' | 'top';
@@ -85,6 +86,8 @@ export interface ProFormSchema {
     field: string;
     /** 标签 */
     label: string;
+    /** 单个表单项标签宽度，优先级高于 Form 的 labelWidth */
+    labelWidth?: string;
     /**
      * 组件类型：
      * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.03",
+  "version": "1.0.05",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",
@@ -22,7 +22,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:loading": "node scripts/test-loading.cjs"
+    "test:loading": "node scripts/test-loading.cjs",
+    "test:proform-vmodel": "node scripts/test-proform-vmodel.cjs"
   },
   "peerDependencies": {
     "element-ui": "^2.15.0",

package/src/ProForm/ProForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="formWrapRef" class="ecp-pro-form">
-    <el-form class="ecp-pro-form" ref="formRef" :model="formModel" :rules="formRules" :label-width="effectiveProps.labelWidth"
+    <el-form class="ecp-pro-form" ref="formRef" :model="currentFormModel" :rules="formRules" :label-width="effectiveProps.labelWidth"
       :label-position="effectiveProps.labelPosition" :size="effectiveProps.size" :disabled="effectiveProps.disabled"
       v-bind="$attrs" v-on="formListeners">
       <slot name="formHeader" />
@@ -8,12 +8,12 @@
         <template v-for="schema in displaySchemas">
           <el-col v-if="shouldShow(schema)" :key="schema.field" v-bind="getColProps(schema)"
             :offset="schema.colProps?.offset ?? effectiveProps.baseColProps?.offset ?? 0" :data-field="schema.field">
-            <ProFormItem :schema="schema" :form-model="formModel" :form-disabled="effectiveProps.disabled"
+            <ProFormItem :schema="schema" :form-model="currentFormModel" :form-disabled="effectiveProps.disabled"
               :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef"
-              :custom-components="formCustomComponents">
+              :custom-components="formCustomComponents" :on-field-change="handleFieldChange">
               <template v-if="slots[getSlotName(schema)]">
-                <slot :name="getSlotName(schema)" :model="formModel" :schema="schema" :field="schema.field"
-                  :values="formModel" />
+                <slot :name="getSlotName(schema)" :model="currentFormModel" :schema="schema" :field="schema.field"
+                  :values="currentFormModel" />
               </template>
             </ProFormItem>
           </el-col>
@@ -65,6 +65,7 @@ import type { ProFormSchema, ProFormProps, FormActionType, ColEx, ScrollToFieldO
 const props = withDefaults(
   defineProps<{
     schemas?: ProFormSchema[]
+    modelValue?: Record<string, unknown>
     initialValues?: Record<string, unknown>
     labelWidth?: string
     labelPosition?: 'left' | 'right' | 'top'
@@ -118,6 +119,7 @@ const emit = defineEmits<{
   (e: 'submit', values: Record<string, unknown>): void
   (e: 'reset'): void
   (e: 'register', formAction: FormActionType): void
+  (e: 'update:modelValue', values: Record<string, unknown>): void
 }>()
 const slots = useSlots()
 const formRef = ref()
@@ -148,10 +150,17 @@ const getEffectiveSpan = (colProps?: ColEx | null, baseColProps?: ColEx | null,
 
 const { getSetting: getComponentSetting } = useComponentSetting()
 const effectiveProps = computed(() => ({ ...getComponentSetting('ProForm'), ...props, ...innerProps.value }))
+const controlledModelValue = computed(() => effectiveProps.value.modelValue)
+const isControlled = computed(() => controlledModelValue.value !== undefined)
+const currentFormModel = computed<Record<string, unknown>>(() => {
+  return isControlled.value
+    ? (controlledModelValue.value ?? {})
+    : formModel.value
+})
 /** 传给 ProFormItem 的自定义组件映射：显式合并 setSetting 与 props，避免响应式代理导致组件引用丢失 */
 const formCustomComponents = computed(() => ({
   ...(getComponentSetting('ProForm').components as Record<string, unknown> | undefined) ?? {},
-  ...(props.components ?? {}),
+  ...(effectiveProps.value.components ?? {}),
   ...(innerProps.value.components ?? {}),
 }))
 const effectiveActionColOptions = computed(() => effectiveProps.value.actionColOptions ?? { span: 24 })
@@ -190,7 +199,6 @@ const hasMoreFields = computed(() => {
   const lines = effectiveProps.value.alwaysShowLines ?? 1
   const baseColProps = effectiveProps.value.baseColProps
   const maxVisible = getVisibleSchemaCount(schemas, baseColProps, lines, windowWidth.value)
-  console.log(schemas.length, maxVisible)
   return schemas.length > maxVisible
 })
 
@@ -213,13 +221,13 @@ const shouldShow = (schema: ProFormSchema) => {
   let ifShow = true
   let show = true
   if (typeof schema.ifShow === 'function') {
-    ifShow = schema.ifShow({ schema, values: formModel.value, model: formModel.value, field: schema.field })
+    ifShow = schema.ifShow({ schema, values: currentFormModel.value, model: currentFormModel.value, field: schema.field })
   }
   if (typeof schema.ifShow === 'boolean') {
     ifShow = schema.ifShow
   }
   if (typeof schema.show === 'function') {
-    show = schema.show({ schema, values: formModel.value, model: formModel.value, field: schema.field })
+    show = schema.show({ schema, values: currentFormModel.value, model: currentFormModel.value, field: schema.field })
   }
   if (typeof schema.show === 'boolean') {
     show = schema.show
@@ -230,16 +238,44 @@ const getColProps = (schema: ProFormSchema) => {
   return schema.colProps ?? effectiveProps.value.baseColProps ?? {}
 }
 const getSlotName = (schema: ProFormSchema) => schema.slot || schema.field
+/**
+ * 
+ * @param baseModel 
+ * @param preserveExisting 
+ */
+const resolveSchemaModel = (baseModel?: Record<string, unknown>, preserveExisting = true) => {
+  const nextModel = preserveExisting ? { ...(baseModel ?? {}) } : {}
+  const initialValues = effectiveProps.value.initialValues ?? props.initialValues
+  innerSchemas.value.forEach((schema) => {
+    if (preserveExisting && Object.prototype.hasOwnProperty.call(nextModel, schema.field)) return
+    if (schema.defaultValue !== undefined) {
+      nextModel[schema.field] = schema.defaultValue
+      return
+    }
+    if (initialValues && Object.prototype.hasOwnProperty.call(initialValues, schema.field)) {
+      nextModel[schema.field] = initialValues[schema.field]
+    }
+  })
+  return nextModel
+}
+
+const applyFormModel = (nextModel: Record<string, unknown>, shouldEmit = true) => {
+  formModel.value = nextModel
+  if (shouldEmit) emit('update:modelValue', nextModel)
+}
+
+const updateFormModel = (values: Record<string, unknown>) => {
+  const nextModel = resolveSchemaModel({ ...currentFormModel.value, ...values })
+  applyFormModel(nextModel)
+  return nextModel
+}
 
 const initForm = () => {
-  const model: Record<string, unknown> = {}
   const rules: Record<string, unknown[]> = {}
-  const initialValues = effectiveProps.value.initialValues ?? props.initialValues
   innerSchemas.value.forEach((schema) => {
-    model[schema.field] = schema.defaultValue ?? initialValues?.[schema.field]
     if (schema.rules?.length) rules[schema.field] = schema.rules
   })
-  formModel.value = { ...formModel.value, ...model }
+  applyFormModel(resolveSchemaModel(currentFormModel.value), false)
   formRules.value = rules
 }
 
@@ -277,7 +313,7 @@ const handleSubmit = async () => {
       await effectiveProps.value.submitFunc()
     } else {
       submitLoading.value = true
-      emit('submit', processFieldMapToTime({ ...formModel.value }))
+      emit('submit', processFieldMapToTime({ ...currentFormModel.value }))
     }
   } catch (e) {
     console.error('Form validation failed:', e)
@@ -298,15 +334,19 @@ const handleReset = async () => {
 }
 
 const setFieldsValue = (values: Record<string, unknown>) => {
-  formModel.value = { ...formModel.value, ...values }
+  updateFormModel(values)
   return Promise.resolve()
 }
 
-const getFieldsValue = () => processFieldMapToTime({ ...formModel.value })
+const getFieldsValue = () => processFieldMapToTime({ ...currentFormModel.value })
 
 const resetFields = async () => {
   formRef.value?.resetFields()
-  initForm()
+  applyFormModel(resolveSchemaModel(undefined, false))
+}
+
+const handleFieldChange = (field: string, value: unknown) => {
+  updateFormModel({ [field]: value })
 }
 
 const validate = (nameList?: string[]) =>
@@ -398,6 +438,11 @@ onUnmounted(() => {
   if (typeof window !== 'undefined') window.removeEventListener('resize', handleResize)
 })
 
+watch(() => controlledModelValue.value, (value) => {
+  if (!isControlled.value || value === undefined) return
+  applyFormModel(resolveSchemaModel(value), false)
+}, { deep: true, immediate: true })
+
 watch(() => [props.schemas, props.initialValues], syncSchemas, { deep: true })
 </script>
 

package/src/ProForm/ProFormItem.vue

@@ -5,6 +5,7 @@
     :prop="schema.field"
     :required="schema.required"
     :rules="effectiveRules"
+    :label-width="schema.labelWidth"
   >
     <template slot="label">
       <span>{{ schema.label }}</span>
@@ -180,6 +181,7 @@ const props = defineProps<{
   formDisabled?: boolean
   autoPlaceholder?: boolean
   formActionType?: import('../types').FormActionType
+  onFieldChange?: (field: string, value: unknown) => void
   /** 自定义组件映射（由 ProForm 传入） */
   customComponents?: Record<string, unknown>
 }>()
@@ -265,7 +267,7 @@ const resolvedCustomComponent = computed(() => {
 })
 
 const setFieldValue = (v: unknown) => {
-  props.formModel[props.schema.field] = v
+  props.onFieldChange?.(props.schema.field, v)
 }
 
 const renderComponent = computed(() => {

package/src/ProTable/TableAction.vue

@@ -12,8 +12,8 @@
         :title="action.popConfirm.title"
         :confirm-button-text="action.popConfirm.okText || '确定'"
         :cancel-button-text="action.popConfirm.cancelText || '取消'"
-        @confirm="(e) => handlePopConfirm(action, 'confirm', e)"
-        @cancel="(e) => handlePopConfirm(action, 'cancel', e)"
+        @confirm="handlePopConfirmConfirm(action, $event)"
+        @cancel="handlePopConfirmCancel(action, $event)"
       >
         <span slot="reference">
           <component
@@ -25,7 +25,7 @@
               size="small"
               :disabled="action.disabled"
               v-bind="action.props"
-              @click="(e) => handleClick(action, e)"
+               @click="handleActionClick(action, $event)"
             >
               <i v-if="action.icon" :class="['ecp-table-action__icon', action.icon]" />
               <span>{{ action.label }}</span>
@@ -45,7 +45,7 @@
           size="small"
           :disabled="action.disabled"
           v-bind="action.props"
-          @click="(e) => handleClick(action, e)"
+          @click="handleActionClick(action, $event)"
         >
           <i v-if="action.icon" :class="['ecp-table-action__icon', action.icon]" />
           <span>{{ action.label }}</span>
@@ -133,6 +133,10 @@ const handleClick = (action: TableActionItem, e: MouseEvent) => {
   action.onClick?.(e)
 }
 
+const handleActionClick = (action: TableActionItem, e: MouseEvent) => {
+  handleClick(action, e)
+}
+
 const handlePopConfirm = (action: TableActionItem, type: 'confirm' | 'cancel', e: MouseEvent) => {
   if (props.stopButtonPropagation) {
     e.stopPropagation()
@@ -145,6 +149,14 @@ const handlePopConfirm = (action: TableActionItem, type: 'confirm' | 'cancel', e
   }
 }
 
+const handlePopConfirmConfirm = (action: TableActionItem, e: MouseEvent) => {
+  handlePopConfirm(action, 'confirm', e)
+}
+
+const handlePopConfirmCancel = (action: TableActionItem, e: MouseEvent) => {
+  handlePopConfirm(action, 'cancel', e)
+}
+
 const handleDropdownCommand = (index: number | string) => {
   const idx = Number(index)
   const action = visibleDropDownActions.value[idx]
@@ -190,4 +202,3 @@ const handleDropdownCommand = (index: number | string) => {
   gap: 4px;
 }
 </style>
-

package/src/types/index.ts

@@ -56,6 +56,7 @@ export type FormListeners = Record<string, ((...args: unknown[]) => unknown) | (
 /** ProForm Props */
 export interface ProFormProps {
   schemas?: ProFormSchema[]
+  modelValue?: Record<string, unknown>
   initialValues?: Record<string, unknown>
   labelWidth?: string
   labelPosition?: 'left' | 'right' | 'top'
@@ -105,6 +106,8 @@ export interface ProFormSchema {
   field: string
   /** 标签 */
   label: string
+  /** 单个表单项标签宽度，优先级高于 Form 的 labelWidth */
+  labelWidth?: string
   /**
    * 组件类型：
    * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'