@aspire-ui/element-component-pro 1.0.28 → 1.0.29

package/dist/index.d.ts

@@ -3316,6 +3316,8 @@ declare const _default: {
         getModelValue: () => Record<string, unknown>[];
         setModelValue: (val: Record<string, unknown>[]) => void;
         getFormRef: () => import('./types').FormInstance | null;
+        getRow: (index: number) => Record<string, unknown>;
+        setRow: (index: number, row: Record<string, unknown>) => void;
     }> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{
         disabled: {
             type: import('vue').PropType<boolean>;
@@ -3527,6 +3529,8 @@ declare const _default: {
         getModelValue: () => Record<string, unknown>[];
         setModelValue: (val: Record<string, unknown>[]) => void;
         getFormRef: () => import('./types').FormInstance | null;
+        getRow: (index: number) => Record<string, unknown>;
+        setRow: (index: number, row: Record<string, unknown>) => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         "update:modelValue": (v: Record<string, unknown>[]) => void;
         "add-row": () => void;

package/dist/types/index.d.ts

@@ -304,7 +304,7 @@ export interface ProTableFormColumn {
     /**
      * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
      * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。
-     * 支持函数形式，参数为 { row, value, column, action }，返回要合并到组件上的属性。
+     * 支持函数形式，参数为 { row, value, column, index, formActionType }，返回要合并到组件上的属性。
      */
     componentProps?: Record<string, unknown> | ((params: CellComponentPropsParams) => Record<string, unknown>);
     /** 动态校验规则 */
@@ -360,7 +360,7 @@ export interface ProTableFormColumnChild {
     /**
      * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
      * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。
-     * 支持函数形式，参数为 { row, value, column, action }，返回要合并到组件上的属性。
+     * 支持函数形式，参数为 { row, value, column, index, formActionType }，返回要合并到组件上的属性。
      */
     componentProps?: Record<string, unknown> | ((params: CellComponentPropsParams) => Record<string, unknown>);
     rules?: unknown[];
@@ -478,12 +478,18 @@ export interface ProTableFormActionType {
     setModelValue: (val: Record<string, unknown>[]) => void;
     /** 获取 el-form 实例（可用于滚动、聚焦等高级操作） */
     getFormRef: () => FormInstance | null;
+    /** 获取指定行 */
+    getRow: (index: number) => Record<string, unknown>;
+    /** 设置指定行 */
+    setRow: (index: number, row: Record<string, unknown>) => void;
 }
 /** componentProps 函数的参数类型 */
 export interface CellComponentPropsParams {
     row: Record<string, unknown>;
     value: unknown;
+    /** 当前单元格所在行的索引 */
+    index?: number;
     column: ProTableFormColumn | ProTableFormColumnChild;
-    /** ProTableForm 操作实例，可调用 validate、addRow、removeRow 等 */
-    action: ProTableFormActionType;
+    /** ProTableForm 操作实例 */
+    formActionType: ProTableFormActionType;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",

package/src/ProForm/ProForm.vue

@@ -384,6 +384,7 @@ const updateSchema = async (data: Partial<ProFormSchema> | Partial<ProFormSchema
     const idx = innerSchemas.value.findIndex((s) => s.field === item.field)
     if (idx >= 0) innerSchemas.value[idx] = { ...innerSchemas.value[idx], ...item }
   })
+  initForm()
 }
 
 const appendSchemaByField = async (schema: ProFormSchema, prefixField?: string, first?: boolean) => {

package/src/ProTableForm/CellEditor.vue

@@ -4,7 +4,7 @@
     v-if="col.component === 'select'"
     :value="value"
     v-bind="cellBind"
-    :placeholder="placeholder"
+    :placeholder="cellBind.placeholder || placeholder"
     v-on="mergedEvents('change', 'clear')"
   >
     <el-option
@@ -50,7 +50,7 @@
     end-placeholder="结束日期"
     value-format="yyyy-MM-dd"
     v-bind="cellBind"
-    :placeholder="placeholder"
+    :placeholder="cellBind.placeholder || placeholder"
     v-on="mergedEvents('change')"
   />
   <!-- api-select -->
@@ -58,7 +58,7 @@
     v-else-if="col.component === 'api-select'"
     :value="value"
     v-bind="cellBind"
-    :placeholder="placeholder"
+    :placeholder="cellBind.placeholder || placeholder"
     v-on="mergedEvents('change')"
   />
   <!-- tree-select -->
@@ -66,7 +66,7 @@
     v-else-if="col.component === 'tree-select'"
     :value="value"
     v-bind="cellBind"
-    :placeholder="placeholder"
+    :placeholder="cellBind.placeholder || placeholder"
     v-on="mergedEvents('change')"
   />
   <!-- 其余 el-* 组件（input / input-number / formatted-number / date-picker / switch / cascader） -->
@@ -75,13 +75,13 @@
     :is="cellComp"
     :value="value"
     v-bind="cellBind"
-    :placeholder="placeholder"
-    v-on="mergedEvents('input')"
+    :placeholder="cellBind.placeholder || placeholder"
+    v-on="mergedEvents('input', 'change')"
   />
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import ApiSelect from '../ProForm/ApiSelect.vue'
 import TreeSelect from '../ProForm/TreeSelect.vue'
 import FormattedNumberInput from '../ProForm/FormattedNumberInput.vue'
@@ -90,12 +90,14 @@ import type { ProTableFormColumn, ProTableFormColumnChild, ProTableFormActionTyp
 const props = defineProps<{
   col: ProTableFormColumn | ProTableFormColumnChild
   value: unknown
-  /** 当前行数据，用于 dynamicComponentProps 动态求值 */
+  /** 当前行数据，用于 componentProps 动态求值 */
   row?: Record<string, unknown>
+  /** 当前行索引 */
+  index?: number
   size?: 'medium' | 'small' | 'large'
   placeholder?: string
   /** ProTableForm 操作实例 */
-  action?: ProTableFormActionType
+  formActionType?: ProTableFormActionType
 }>()
 
 const emit = defineEmits<{ (e: 'update', v: unknown): void }>()
@@ -119,23 +121,54 @@ const cellComp = computed(() => {
   return map[props.col.component as string] || 'el-input'
 })
 
-/** All v-bind props, with onXxx event handlers stripped out */
-const cellBind = computed<Record<string, unknown>>(() => {
-  let staticProps: Record<string, unknown> = {}
-  let dynamicProps: Record<string, unknown> = {}
+/**
+ * componentProps 求值结果缓存（仅在 props 变化时重新计算）。
+ * cellBind 和 cellEvents 都从同一个缓存中读取，保证求值只发生一次，
+ * 避免同一渲染周期中生成两份不同的 handler 闭包导致双重触发。
+ */
+const componentPropsResult = computed<{
+  bind: Record<string, unknown>
+  /** 用户 componentProps 中的事件处理器（onXxx → xxx），尚未与 emit 合并 */
+  userEvents: Record<string, (...args: unknown[]) => unknown>
+}>(() => {
+  let raw: Record<string, unknown> = {}
 
-  const cp = props.col.componentProps
-  if (typeof cp === 'function') {
-    dynamicProps = cp({ row: props.row ?? {}, value: props.value, column: props.col as any, action: props.action as any })
+  if (typeof props.col.componentProps === 'function') {
+    const row = props.row ?? {} as Record<string, unknown>
+    const formActionType = props.formActionType as ProTableFormActionType
+    raw = props.col.componentProps({
+      row,
+      value: props.value,
+      index: props.index,
+      column: props.col as never,
+      formActionType,
+    })
   } else {
-    staticProps = cp ?? {}
+    raw = props.col.componentProps ?? {}
   }
 
-  const base: Record<string, unknown> = { size: props.size }
-  for (const [key, val] of Object.entries({ ...staticProps, ...dynamicProps })) {
-    if (/^on[A-Za-z]/.test(key) && typeof val === 'function') continue
-    base[key] = val
+  const bind: Record<string, unknown> = {}
+  const userEvents: Record<string, (...args: unknown[]) => unknown> = {}
+
+  for (const [key, val] of Object.entries(raw)) {
+    if (/^on[A-Za-z]/.test(key) && typeof val === 'function') {
+      const eventName = key[2].toLowerCase() + key.slice(3)
+      userEvents[eventName] = val as (...args: unknown[]) => unknown
+    } else {
+      bind[key] = val
+    }
   }
+
+  return { bind, userEvents }
+})
+
+/** v-bind 的属性（排除 onXxx 事件） */
+const cellBind = computed<Record<string, unknown>>(() => {
+  void props.value  // 追踪响应式
+  void props.row    // 追踪响应式
+  void props.formActionType // 追踪响应式
+
+  const base: Record<string, unknown> = { size: props.size, ...componentPropsResult.value.bind }
   if (props.col.component === 'formatted-number') {
     return { integerDigits: 5, decimalPlaces: 6, rounding: 'round', inputLimit: true, ...base }
   }
@@ -147,35 +180,17 @@ const cellBind = computed<Record<string, unknown>>(() => {
   return base
 })
 
-/**
- * Event handlers from componentProps (onXxx → xxx).
- * componentProps 中的 onChange/onInput 等会经过 v-on 绑定，
- * 不再通过 v-bind 直接作为 DOM 属性展开，避免触发 el-form 整行重校验。
- */
+/** componentProps 中的事件处理器（onXxx → xxx） */
 const cellEvents = computed<Record<string, (...args: unknown[]) => unknown>>(() => {
-  let staticProps: Record<string, unknown> = {}
-  let dynamicProps: Record<string, unknown> = {}
-
-  const cp = props.col.componentProps
-  if (typeof cp === 'function') {
-    dynamicProps = cp({ row: props.row ?? {}, value: props.value, column: props.col as any, action: props.action as any })
-  } else {
-    staticProps = cp ?? {}
-  }
-
-  const events: Record<string, (...args: unknown[]) => unknown> = {}
-  for (const [key, val] of Object.entries({ ...staticProps, ...dynamicProps })) {
-    if (/^on[A-Za-z]/.test(key) && typeof val === 'function') {
-      const eventName = key[2].toLowerCase() + key.slice(3)
-      events[eventName] = val as (...args: unknown[]) => unknown
-    }
-  }
-  return events
+  void props.value  // 追踪响应式
+  void props.row    // 追踪响应式
+  void props.formActionType // 追踪响应式
+  return componentPropsResult.value.userEvents
 })
 
 /**
- * Merges cellEvents (from componentProps) with the internal emit bridge.
- * componentProps listeners fire first, then emit('update') updates the row value.
+ * 合并 cellEvents 与内部 emit('update')。
+ * componentProps 的 handler 先执行（可调用 formActionType.setModelValue 做联动），再 emit('update') 更新行值。
  * clear 事件特殊处理：用户 handler 先执行，再 emit(undefined) 清空值。
  */
 const mergedEvents = (...internalEvents: Array<'input' | 'change' | 'clear'>) => {
@@ -183,8 +198,11 @@ const mergedEvents = (...internalEvents: Array<'input' | 'change' | 'clear'>) =>
   for (const internalEvent of internalEvents) {
     const userHandler = cellEvents.value[internalEvent]
     handlers[internalEvent] = (arg: unknown) => {
-      if (userHandler) userHandler(arg)
+      // if (userHandler) userHandler(arg)
       emit('update', internalEvent === 'clear' ? undefined : arg)
+      nextTick(()=>{
+        if (userHandler) userHandler(arg)
+      })
     }
   }
   return handlers

package/src/ProTableForm/ProTableForm.vue

@@ -124,9 +124,10 @@
                       :col="child"
                       :value="getCellValue(slotProps.row, col, child.key)"
                       :row="slotProps.row"
+                      :index="slotProps.$index"
                       :size="size"
                       :placeholder="col.placeholder || metricPlaceholder"
-                      :action="action"
+                      :formActionType="action"
                       @update="setCellValue(slotProps.row, col, child.key, $event)"
                     />
                   </el-form-item>
@@ -203,9 +204,10 @@
                   :col="col"
                   :value="getCellValue(slotProps.row, col)"
                   :row="slotProps.row"
+                  :index="slotProps.$index"
                   :size="size"
                   :placeholder="col.placeholder || metricPlaceholder"
-                  :action="action"
+                  :formActionType="action"
                   @update="setCellValue(slotProps.row, col, undefined, $event)"
                 />
               </el-form-item>
@@ -363,6 +365,8 @@ const {
   setCellValue,
   handleAddRow,
   handleRemoveRow,
+  getRow,
+  setRow,
   validate,
   clearValidate,
 } = useProTableForm({
@@ -412,6 +416,8 @@ const action = {
   getModelValue: () => [...currentModelValue.value],
   setModelValue: (val: Record<string, unknown>[]) => emit('update:modelValue', val),
   getFormRef: () => formRef.value,
+  getRow,
+  setRow,
 }
 
 defineExpose(action)

package/src/ProTableForm/useProTableForm.ts

@@ -61,6 +61,10 @@ export interface UseProTableFormReturn {
   handleAddRow: () => void
   handleRemoveRow: (index: number) => void
 
+  // --- 行读写（供 action 暴露） ---
+  getRow: (index: number) => Record<string, unknown>
+  setRow: (index: number, row: Record<string, unknown>) => void
+
   // --- el-form 实例方法 ---
   validate: () => Promise<boolean>
   clearValidate: (propsArg?: string | string[]) => void
@@ -205,6 +209,23 @@ export function useProTableForm(options: ProTableFormOptions): UseProTableFormRe
     emitNext(next)
   }
 
+  /**
+   * 按索引获取行数据。
+   */
+  function getRow(index: number): Record<string, unknown> {
+    return currentModelValue.value[index] ?? {}
+  }
+
+  /**
+   * 按索引替换行数据（触发 update:modelValue）。
+   */
+  function setRow(index: number, row: Record<string, unknown>): void {
+    if (index < 0 || index >= currentModelValue.value.length) return
+    const next = cloneRows()
+    next[index] = row
+    emitNext(next)
+  }
+
   const canDeleteRow = computed(() => {
     return currentModelValue.value.length > (props.minRows ?? 0)
   })
@@ -435,6 +456,10 @@ export function useProTableForm(options: ProTableFormOptions): UseProTableFormRe
     handleAddRow,
     handleRemoveRow,
 
+    // 行读写
+    getRow,
+    setRow,
+
     // el-form 实例方法
     validate,
     clearValidate,

package/src/types/index.ts

@@ -350,7 +350,7 @@ export interface ProTableFormColumn {
   /**
    * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
    * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。
-   * 支持函数形式，参数为 { row, value, column, action }，返回要合并到组件上的属性。
+   * 支持函数形式，参数为 { row, value, column, index, formActionType }，返回要合并到组件上的属性。
    */
   componentProps?: Record<string, unknown> | ((params: CellComponentPropsParams) => Record<string, unknown>)
   /** 动态校验规则 */
@@ -407,7 +407,7 @@ export interface ProTableFormColumnChild {
   /**
    * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
    * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。
-   * 支持函数形式，参数为 { row, value, column, action }，返回要合并到组件上的属性。
+   * 支持函数形式，参数为 { row, value, column, index, formActionType }，返回要合并到组件上的属性。
    */
   componentProps?: Record<string, unknown> | ((params: CellComponentPropsParams) => Record<string, unknown>)
   rules?: unknown[]
@@ -515,14 +515,20 @@ export interface ProTableFormActionType {
   setModelValue: (val: Record<string, unknown>[]) => void
   /** 获取 el-form 实例（可用于滚动、聚焦等高级操作） */
   getFormRef: () => FormInstance | null
+  /** 获取指定行 */
+  getRow: (index: number) => Record<string, unknown>
+  /** 设置指定行 */
+  setRow: (index: number, row: Record<string, unknown>) => void
 }
 
 /** componentProps 函数的参数类型 */
 export interface CellComponentPropsParams {
   row: Record<string, unknown>
   value: unknown
+  /** 当前单元格所在行的索引 */
+  index?: number
   column: ProTableFormColumn | ProTableFormColumnChild
-  /** ProTableForm 操作实例，可调用 validate、addRow、removeRow 等 */
-  action: ProTableFormActionType
+  /** ProTableForm 操作实例 */
+  formActionType: ProTableFormActionType
 }