@aspire-ui/element-component-pro 1.0.24 → 1.0.26

package/src/ProTableForm/ProTableForm.vue

@@ -1,170 +1,225 @@
 <template>
-  <div class="ecp-pro-table-form">
+  <div class="ecp-pro-table-form" v-bind="$attrs">
     <el-form
       ref="formRef"
-      :model="modelValue"
+      :model="formModelRef"
       :rules="mergedRules"
+      :validate-on-rule-change="false"
       :label-width="labelWidth"
+      :size="formSize"
+      :label-position="labelPosition"
+      :disabled="disabled"
+      v-bind="formProps"
       class="ecp-pro-table-form__form"
     >
       <el-table
+        ref="tableRef"
         :data="tableRows"
         :border="bordered"
+        :stripe="stripe"
+        :size="size"
+        :max-height="maxHeight"
+        :height="height"
         :row-key="rowKeyFn"
+        :row-class-name="rowClassName"
+        :default-expand-all="defaultExpandAll"
+        :span-method="spanMethodAdapter"
         header-cell-class-name="ecp-pro-table-form__header-cell"
+        v-bind="tableProps"
         class="ecp-pro-table-form__table"
+        @row-click="handleTableRowClick"
+        @row-dblclick="handleTableRowDblclick"
+        @sort-change="handleTableSortChange"
+        @expand-change="handleTableExpandChange"
       >
-        <!-- 首列：维度 / 友商名称（可插槽自定义） -->
-        <el-table-column
-          v-if="showFirstColumnComputed"
-          :min-width="firstColMinWidth"
-          :fixed="firstColumnFixed"
-        >
-          <template #header>
-            <slot name="firstColumnHeader">
-              <span class="ecp-pro-table-form__th-text">
-                <span class="ecp-pro-table-form__req">*</span>{{ firstColumnTitle }}
-              </span>
-            </slot>
-          </template>
-          <template #default="slotProps">
-            <slot name="firstColumn" v-bind="firstColumnScope(slotProps)">
-              <template v-if="slotProps.row._type === 'fixed'">
-                <span class="ecp-pro-table-form__fixed-label">{{ slotProps.row.rowLabel }}</span>
+        <template v-for="col in flatColumns">
+          <!-- 分组列：有 children -->
+          <el-table-column
+            v-if="col.children && col.children.length > 0"
+            :key="'col-' + col._key"
+            :label="col.title"
+            :min-width="col.minWidth || col.width || 120"
+            :width="col.width"
+            :align="col.align || 'center'"
+            :header-align="col.headerAlign"
+            :fixed="col.fixed"
+            :cell-style="col.cellStyle"
+            :header-cell-style="col.headerCellStyle"
+            :cell-class-name="col.cellClassName"
+            :header-cell-class-name="col.headerCellClassName"
+            :sortable="col.sortable"
+            :resizable="col.resizable !== false"
+          >
+            <template #header>
+              <slot :name="`header-${col.key}`" :column="col">
+                <span class="ecp-pro-table-form__th-text">
+                  <span v-if="col.required" class="ecp-pro-table-form__req">*</span>{{ col.title }}
+                </span>
+              </slot>
+            </template>
+            <template v-for="child in col.children">
+              <el-table-column
+                v-if="!child.hideInTable"
+                :key="'col-' + col.key + '-' + child.key"
+                :label="child.title"
+                :min-width="child.minWidth || child.width || 120"
+                :width="child.width"
+                :align="child.align || 'center'"
+                :header-align="child.headerAlign"
+                :fixed="child.fixed"
+                :cell-style="child.cellStyle"
+                :header-cell-style="child.headerCellStyle"
+                :cell-class-name="child.cellClassName"
+                :header-cell-class-name="child.headerCellClassName"
+                :sortable="child.sortable"
+                :resizable="child.resizable !== false"
+              >
+                <template #header>
+                  <slot :name="`header-${child.key}`" :column="child">
+                    <span class="ecp-pro-table-form__th-text">
+                      <span v-if="child.required" class="ecp-pro-table-form__req">*</span>{{ child.title }}
+                    </span>
+                  </slot>
+                </template>
+                <template #default="slotProps">
+                  <!-- 渲染函数 -->
+                  <template v-if="child.render">
+                    <el-form-item
+                      :prop="getCellProp(slotProps.row, col, child.key)"
+                      :rules="mergedRules[getCellProp(slotProps.row, col, child.key)]"
+                      class="ecp-pro-table-form__cell-item"
+                    >
+                      <template v-if="getRender(child, slotProps.row, col, child.key).isText">
+                        <span>{{ getRender(child, slotProps.row, col, child.key).value }}</span>
+                      </template>
+                      <template v-else>
+                        <RenderCell :render-fn="child.render" :render-params="{ row: slotProps.row, col, childKey: child.key }" />
+                      </template>
+                    </el-form-item>
+                  </template>
+                  <!-- 插槽列 -->
+                  <template v-else-if="child.component === 'slot' && child.slotName">
+                    <el-form-item
+                      :prop="getCellProp(slotProps.row, col, child.key)"
+                      :rules="mergedRules[getCellProp(slotProps.row, col, child.key)]"
+                      class="ecp-pro-table-form__cell-item"
+                    >
+                      <slot
+                        :name="`cell-${child.slotName}`"
+                        :column="child"
+                        :row="slotProps.row"
+                        :index="slotProps.$index"
+                        :value="getCellValue(slotProps.row, col, child.key)"
+                        :update-value="slotUpdateHandler(slotProps, col, child.key)"
+                      />
+                    </el-form-item>
+                  </template>
+                  <!-- 内置组件 -->
+                  <el-form-item
+                    v-else
+                    :prop="getCellProp(slotProps.row, col, child.key)"
+                    :rules="mergedRules[getCellProp(slotProps.row, col, child.key)]"
+                    class="ecp-pro-table-form__cell-item"
+                  >
+                    <CellEditor
+                      :col="child"
+                      :value="getCellValue(slotProps.row, col, child.key)"
+                      :row="slotProps.row"
+                      :size="size"
+                      :placeholder="col.placeholder || metricPlaceholder"
+                      @update="setCellValue(slotProps.row, col, child.key, $event)"
+                    />
+                  </el-form-item>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table-column>
+
+          <!-- 叶子列：无 children -->
+          <el-table-column
+            v-else-if="!col.hideInTable"
+            :key="'leaf-' + col._key"
+            :label="col.title"
+            :min-width="col.minWidth || col.width || 120"
+            :width="col.width"
+            :align="col.align || 'center'"
+            :header-align="col.headerAlign"
+            :fixed="col.fixed"
+            :cell-style="col.cellStyle"
+            :header-cell-style="col.headerCellStyle"
+            :cell-class-name="col.cellClassName"
+            :header-cell-class-name="col.headerCellClassName"
+            :sortable="col.sortable"
+            :resizable="col.resizable !== false"
+          >
+            <template #header>
+              <slot :name="`header-${col.key}`" :column="col">
+                <span class="ecp-pro-table-form__th-text">
+                  <span v-if="col.required" class="ecp-pro-table-form__req">*</span>{{ col.title }}
+                </span>
+              </slot>
+            </template>
+            <template #default="slotProps">
+              <!-- 渲染函数 -->
+              <template v-if="col.render">
+                <el-form-item
+                  :prop="getCellProp(slotProps.row, col)"
+                  :rules="mergedRules[getCellProp(slotProps.row, col)]"
+                  class="ecp-pro-table-form__cell-item"
+                >
+                  <template v-if="getRender(col, slotProps.row, col).isText">
+                    <span>{{ getRender(col, slotProps.row, col).value }}</span>
+                  </template>
+                  <template v-else>
+                    <RenderCell :render-fn="col.render" :render-params="{ row: slotProps.row, col }" />
+                  </template>
+                </el-form-item>
               </template>
+              <!-- 插槽列 -->
+              <template v-else-if="col.component === 'slot' && col.slotName">
+                <el-form-item
+                  :prop="getCellProp(slotProps.row, col)"
+                  :rules="mergedRules[getCellProp(slotProps.row, col)]"
+                  class="ecp-pro-table-form__cell-item"
+                >
+                  <slot
+                    :name="`cell-${col.slotName}`"
+                    :column="col"
+                    :row="slotProps.row"
+                    :index="slotProps.$index"
+                    :value="getCellValue(slotProps.row, col)"
+                    :update-value="slotUpdateHandler(slotProps, col)"
+                  />
+                </el-form-item>
+              </template>
+              <!-- 内置组件 -->
               <el-form-item
                 v-else
-                :prop="competitorNameProp(slotProps.row._index)"
-                class="ecp-pro-table-form__cell-item"
-              >
-                <el-input
-                  :value="getCompetitorName(slotProps.row._index)"
-                  :placeholder="competitorNamePlaceholder"
-                  @input="setCompetitorName(slotProps.row._index, $event)"
-                />
-              </el-form-item>
-            </slot>
-          </template>
-        </el-table-column>
-
-        <!-- 数据列：内置 input / formatted-number 或插槽 cell-{slotName} -->
-        <el-table-column
-          v-for="col in columns"
-          :key="col.key"
-          :min-width="col.minWidth || col.width || 120"
-          :width="col.width"
-        >
-          <template #header>
-            <slot :name="'header-' + col.key" :column="col">
-              <span class="ecp-pro-table-form__th-text">
-                <span v-if="col.required" class="ecp-pro-table-form__req">*</span>{{ col.title }}
-              </span>
-            </slot>
-          </template>
-          <template #default="slotProps">
-            <!-- 完全自定义列 -->
-            <template v-if="col.component === 'slot' && col.slotName">
-              <el-form-item
-                v-if="slotProps.row._type === 'fixed'"
-                :prop="fixedMetricProp(slotProps.row.rowKey, col.key)"
+                :prop="getCellProp(slotProps.row, col)"
+                :rules="mergedRules[getCellProp(slotProps.row, col)]"
                 class="ecp-pro-table-form__cell-item"
               >
-                <slot
-                  :name="'cell-' + col.slotName"
-                  :column="col"
-                  :row="slotProps.row"
+                <CellEditor
+                  :col="col"
                   :value="getCellValue(slotProps.row, col)"
-                  :update-value="slotUpdateHandler(slotProps, col)"
-                />
-              </el-form-item>
-              <el-form-item
-                v-else
-                :prop="competitorMetricProp(slotProps.row._index, col.key)"
-                class="ecp-pro-table-form__cell-item"
-              >
-                <slot
-                  :name="'cell-' + col.slotName"
-                  :column="col"
                   :row="slotProps.row"
-                  :value="getCellValue(slotProps.row, col)"
-                  :update-value="slotUpdateHandler(slotProps, col)"
-                />
-              </el-form-item>
-            </template>
-            <!-- 内置组件 -->
-            <template v-else>
-              <el-form-item
-                v-if="slotProps.row._type === 'fixed'"
-                :prop="fixedMetricProp(slotProps.row.rowKey, col.key)"
-                class="ecp-pro-table-form__cell-item"
-              >
-                <component
-                  :is="cellComponent(col)"
-                  :value="getFixedMetric(slotProps.row.rowKey, col.key)"
-                  v-bind="cellBind(col)"
+                  :size="size"
                   :placeholder="col.placeholder || metricPlaceholder"
-                  @input="setFixedMetric(slotProps.row.rowKey, col.key, $event)"
-                />
-              </el-form-item>
-              <el-form-item
-                v-else
-                :prop="competitorMetricProp(slotProps.row._index, col.key)"
-                class="ecp-pro-table-form__cell-item"
-              >
-                <component
-                  :is="cellComponent(col)"
-                  :value="getCompetitorMetric(slotProps.row._index, col.key)"
-                  v-bind="cellBind(col)"
-                  :placeholder="col.placeholder || metricPlaceholder"
-                  @input="setCompetitorMetric(slotProps.row._index, col.key, $event)"
+                  @update="setCellValue(slotProps.row, col, undefined, $event)"
                 />
               </el-form-item>
             </template>
-          </template>
-        </el-table-column>
+          </el-table-column>
+        </template>
 
-        <!-- 操作列：表头 / 行内均可插槽 -->
-        <el-table-column v-if="showActionColumn" v-bind="actionColumnBind">
-          <template #header>
-            <slot name="actionHeader">
-              <span v-if="actionColumn?.title" class="ecp-pro-table-form__action-title">{{ actionColumn.title }}</span>
-              <el-button type="text" class="ecp-pro-table-form__add-btn" @click="addCompetitor">
-                {{ addCompetitorText }}
-              </el-button>
-            </slot>
-          </template>
-          <template #default="slotProps">
-            <slot
-              name="action"
-              :row="slotProps.row"
-              :can-delete="canDeleteCompetitor"
-              :add-competitor="addCompetitor"
-              :remove-competitor="removeCompetitor"
-            >
-              <el-button
-                v-if="slotProps.row._type === 'competitor'"
-                type="text"
-                class="ecp-pro-table-form__del-btn"
-                :disabled="!canDeleteCompetitor"
-                @click="removeCompetitor(slotProps.row._index)"
-              >
-                删除
-              </el-button>
-              <el-button v-else type="text" class="ecp-pro-table-form__del-btn" disabled>
-                删除
-              </el-button>
-            </slot>
-          </template>
-        </el-table-column>
+        <!-- 操作列 -->
+        <slot name="action" :add-row="handleAddRow" :remove-row="handleRemoveRow" />
       </el-table>
     </el-form>
   </div>
 </template>
 
 <script lang="ts">
-/**
- * Vue 2 默认 v-model 绑定 value + input；本组件使用 modelValue（与 Vue 3 一致），需显式声明 model。
- */
 export default {
   name: 'ProTableForm',
   model: {
@@ -176,335 +231,190 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import FormattedNumberInput from '../ProForm/FormattedNumberInput.vue'
-import type { ProTableFormActionColumn, ProTableFormColumn, ProTableFormFixedRow } from './types'
+import { useProTableForm } from './useProTableForm'
+import { defineComponent } from 'vue'
+import type { VNode } from 'vue'
+import type {
+  ProTableFormColumn,
+  ProTableFormColumnChild,
+  ProTableFormColumnRender,
+} from '../types'
+import CellEditor from './CellEditor.vue'
+
+/** 与 useProTableForm 内部 tableRows 元素类型对齐 */
+type TableRow = { _index: number }
+
+/** RenderCell：接收 render 函数，在 td 内渲染 VNode，完全脱离 el-table 插槽作用域 */
+const RenderCell = defineComponent({
+  name: 'RenderCell',
+  props: {
+    renderFn: { type: Function as unknown as () => ProTableFormColumnRender, required: true },
+    renderParams: { type: Object as () => Record<string, unknown>, required: true },
+  },
+  setup(props) {
+    return () => {
+      const vnode = props.renderFn(props.renderParams as Parameters<ProTableFormColumnRender>[0])
+      return Array.isArray(vnode) ? vnode : (vnode as VNode)
+    }
+  },
+})
+
+/** 单次执行 render，返回 { isText, value } */
+function execRenderOnce(
+  child: ProTableFormColumn | ProTableFormColumnChild,
+  row: Record<string, unknown>,
+  col: ProTableFormColumn,
+  colKey?: string
+): { isText: boolean; value: ReturnType<NonNullable<typeof child.render>> } {
+  const value = colKey !== undefined
+    ? getCellValue(row as TableRow, col, colKey)
+    : getCellValue(row as TableRow, col)
+  const result = child.render!({ row, value, column: child })
+  const isText = isPrimitive(result)
+  return { isText, value: result }
+}
+
+/** 行→列key→渲染结果的缓存，避免同一 render 在模板中被多次调用 */
+const _renderCache = new WeakMap<object, Map<string, { isText: boolean; value: unknown }>>()
+
+function getRender(
+  child: ProTableFormColumn | ProTableFormColumnChild,
+  row: Record<string, unknown>,
+  col: ProTableFormColumn,
+  colKey?: string
+): { isText: boolean; value: unknown } {
+  if (!_renderCache.has(row as object)) _renderCache.set(row as object, new Map())
+  const cache = _renderCache.get(row as object)!
+  const cacheKey = col.key + (colKey ? '.' + colKey : '')
+  if (!cache.has(cacheKey)) cache.set(cacheKey, execRenderOnce(child, row, col, colKey))
+  return cache.get(cacheKey)!
+}
+
+/** 是否为基础类型（string / number / boolean / null / undefined） */
+function isPrimitive(val: unknown): val is string | number | boolean | null | undefined {
+  return val === null || typeof val in { string: 1, number: 1, boolean: 1, bigint: 1, symbol: 1 }
+}
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: Record<string, unknown>
+    modelValue?: Record<string, unknown>[]
     columns: ProTableFormColumn[]
-    fixedRows: ProTableFormFixedRow[]
-    competitorsKey?: string
-    competitorNameKey?: string
-    firstColumnTitle?: string
-    competitorNamePlaceholder?: string
     metricPlaceholder?: string
-    addCompetitorText?: string
-    minCompetitors?: number
+    minRows?: number
     rules?: Record<string, unknown>
     labelWidth?: string
     bordered?: boolean
-    firstColMinWidth?: number
-    actionWidth?: number
-    showFirstColumn?: boolean
-    showActionColumn?: boolean
-    actionColumn?: ProTableFormActionColumn
+    spanMethod?: (params: {
+      row: Record<string, unknown>
+      column: { property: string; label: string }
+      rowIndex: number
+      columnIndex: number
+    }) => [number, number] | { rowspan: number; colspan: number } | void
+    // ─── el-form 配置 ────────────────────────────────────────────────
+    formSize?: 'medium' | 'small' | 'large'
+    labelPosition?: 'left' | 'right' | 'top'
+    disabled?: boolean
+    // ─── el-table 配置 ────────────────────────────────────────────────
+    stripe?: boolean
+    size?: 'medium' | 'small' | 'large'
+    maxHeight?: number | string
+    height?: number | string
+    rowClassName?: string | ((params: { row: Record<string, unknown>; rowIndex: number }) => string)
+    expandRowKeys?: (string | number)[]
+    defaultExpandAll?: boolean
+    onRowClick?: (row: Record<string, unknown>, event: Event) => void
+    onRowDblclick?: (row: Record<string, unknown>, event: Event) => void
+    onSortChange?: (sortInfo: { prop: string; order: string }) => void
+    onExpandChange?: (row: Record<string, unknown>, expanded: boolean) => void
+    tableProps?: Record<string, unknown>
+    formProps?: Record<string, unknown>
   }>(),
   {
-    modelValue: () => ({}),
-    competitorsKey: 'competitors',
-    competitorNameKey: 'name',
-    firstColumnTitle: '维度/友商',
-    competitorNamePlaceholder: '请输入友商名称',
+    modelValue: () => [],
     metricPlaceholder: '请输入',
-    addCompetitorText: '+新增友商',
-    minCompetitors: 0,
+    minRows: 0,
     labelWidth: '0',
     bordered: true,
-    firstColMinWidth: 160,
-    actionWidth: 120,
-    showFirstColumn: true,
-    showActionColumn: true,
+    stripe: false,
+    size: 'medium',
+    defaultExpandAll: false,
   }
 )
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: Record<string, unknown>): void
+  (e: 'update:modelValue', v: Record<string, unknown>[]): void
+  (e: 'add-row'): void
+  (e: 'remove-row', index: number): void
+  (e: 'register', action: Record<string, unknown>): void
 }>()
 
-const formRef = ref<{ validate: (cb?: (valid: boolean) => void) => Promise<unknown> | void; clearValidate: (p?: string | string[]) => void } | null>(null)
-
-const ck = () => props.competitorsKey ?? 'competitors'
-const nk = () => props.competitorNameKey ?? 'name'
-
-/** 有固定行时必须保留首列 */
-const showFirstColumnComputed = computed(() => {
-  if (props.fixedRows.length > 0) return true
-  return props.showFirstColumn !== false
-})
-
-const firstColumnFixed = computed(() => 'left' as const)
-
-const actionColumnBind = computed(() => {
-  const ac = props.actionColumn
-  return {
-    width: ac?.width ?? props.actionWidth,
-    minWidth: ac?.minWidth,
-    align: ac?.align ?? 'center',
-    fixed: ac?.fixed === undefined ? 'right' : ac.fixed,
-  }
-})
-
-function rowKeyFn(row: TableRow) {
-  return row._type === 'fixed' ? `f-${row.rowKey}` : `c-${row._index}`
-}
-
-type TableRow =
-  | { _type: 'fixed'; rowKey: string; rowLabel: string }
-  | { _type: 'competitor'; _index: number }
-
-const tableRows = computed<TableRow[]>(() => {
-  const rows: TableRow[] = []
-  props.fixedRows.forEach((fr) => {
-    rows.push({
-      _type: 'fixed',
-      rowKey: fr.rowKey,
-      rowLabel: fr.label,
-    })
-  })
-  const mv = props.modelValue
-  const list = (mv && typeof mv === 'object' ? (mv[ck()] as Record<string, unknown>[] | undefined) : undefined) ?? []
-  list.forEach((_, i) => {
-    rows.push({ _type: 'competitor', _index: i })
-  })
-  return rows
+const {
+  formModelRef,
+  currentModelValue,
+  mergedRules,
+  tableRows,
+  rowKeyFn,
+  spanMethodAdapter,
+  formRef,
+  slotUpdateHandler,
+  getCellProp,
+  getCellValue,
+  setCellValue,
+  handleAddRow,
+  handleRemoveRow,
+  validate,
+  clearValidate,
+} = useProTableForm({
+  props,
+  emit,
+  emitAddRow: () => emit('add-row'),
+  emitRemoveRow: (index) => emit('remove-row', index),
 })
 
-const canDeleteCompetitor = computed(() => {
-  const mv = props.modelValue
-  const n = ((mv && typeof mv === 'object' ? (mv[ck()] as unknown[]) : undefined) ?? []).length
-  return n > props.minCompetitors
-})
+void formRef
 
-function cloneModel(): Record<string, unknown> {
-  const m = props.modelValue
-  if (!m || typeof m !== 'object') {
-    return {}
-  }
-  return JSON.parse(JSON.stringify(m)) as Record<string, unknown>
+/** 表格行点击 */
+function handleTableRowClick(row: TableRow, _column: unknown, event: Event) {
+  props.onRowClick?.(row as Record<string, unknown>, event)
 }
-
-function ensureFixedBlock(rowKey: string): Record<string, unknown> {
-  const mv = props.modelValue
-  if (!mv || typeof mv !== 'object') {
-    const o: Record<string, unknown> = {}
-    for (const c of props.columns) {
-      o[c.key] = ''
-    }
-    return o
-  }
-  const m = mv[rowKey]
-  if (m && typeof m === 'object' && !Array.isArray(m)) return m as Record<string, unknown>
-  const o: Record<string, unknown> = {}
-  for (const c of props.columns) {
-    o[c.key] = ''
-  }
-  return o
+/** 表格行双击 */
+function handleTableRowDblclick(row: TableRow, _column: unknown, event: Event) {
+  props.onRowDblclick?.(row as Record<string, unknown>, event)
 }
-
-function emitNext(next: Record<string, unknown>) {
-  emit('update:modelValue', next)
+/** 表格排序变化 */
+function handleTableSortChange(sortInfo: { prop: string; order: string }) {
+  props.onSortChange?.(sortInfo)
 }
-
-function getFixedMetric(rowKey: string, key: string): unknown {
-  const block = ensureFixedBlock(rowKey)
-  return block[key] ?? ''
+/** 表格展开变化 */
+function handleTableExpandChange(row: TableRow, expanded: boolean) {
+  props.onExpandChange?.(row as Record<string, unknown>, expanded)
 }
 
-function setFixedMetric(rowKey: string, key: string, val: unknown) {
-  const next = cloneModel()
-  const b = { ...((next[rowKey] as Record<string, unknown>) || {}) }
-  b[key] = val
-  next[rowKey] = b
-  emitNext(next)
-}
-
-function competitorList(): Record<string, unknown>[] {
-  const mv = props.modelValue
-  if (!mv || typeof mv !== 'object') {
-    return []
-  }
-  const list = mv[ck()]
-  if (!Array.isArray(list)) return []
-  return list as Record<string, unknown>[]
-}
-
-function getCompetitorName(index: number): string {
-  const row = competitorList()[index]
-  const key = nk()
-  return row ? String(row[key] ?? '') : ''
-}
-
-function setCompetitorName(index: number, val: string) {
-  const next = cloneModel()
-  const list = [...competitorList()]
-  const row = { ...(list[index] || {}) }
-  row[nk()] = val
-  list[index] = row
-  next[ck()] = list
-  emitNext(next)
-}
-
-function getCompetitorMetric(index: number, key: string): unknown {
-  const row = competitorList()[index]
-  return row ? row[key] ?? '' : ''
-}
-
-function setCompetitorMetric(index: number, key: string, val: unknown) {
-  const next = cloneModel()
-  const list = [...competitorList()]
-  const row = { ...(list[index] || {}) }
-  row[key] = val
-  list[index] = row
-  next[ck()] = list
-  emitNext(next)
-}
-
-function getCellValue(tableRow: TableRow, col: ProTableFormColumn): unknown {
-  if (tableRow._type === 'fixed') {
-    return getFixedMetric(tableRow.rowKey, col.key)
-  }
-  return getCompetitorMetric(tableRow._index, col.key)
-}
-
-function setCellValue(tableRow: TableRow, col: ProTableFormColumn, val: unknown) {
-  if (tableRow._type === 'fixed') {
-    setFixedMetric(tableRow.rowKey, col.key, val)
-  } else {
-    setCompetitorMetric(tableRow._index, col.key, val)
-  }
-}
-
-/** 供插槽列 update-value 绑定，避免模板内箭头参数隐式 any */
-function slotUpdateHandler(slotProps: { row: TableRow }, col: ProTableFormColumn) {
-  return (v: unknown) => setCellValue(slotProps.row, col, v)
-}
-
-function emptyCompetitorRow(): Record<string, unknown> {
-  const o: Record<string, unknown> = { [nk()]: '' }
-  for (const c of props.columns) {
-    o[c.key] = ''
-  }
-  return o
-}
-
-function addCompetitor() {
-  const next = cloneModel()
-  const list = [...competitorList()]
-  list.push(emptyCompetitorRow())
-  next[ck()] = list
-  emitNext(next)
-}
-
-function removeCompetitor(index: number) {
-  if (!canDeleteCompetitor.value) return
-  const next = cloneModel()
-  const list = [...competitorList()]
-  list.splice(index, 1)
-  next[ck()] = list
-  emitNext(next)
-}
-
-function fixedMetricProp(rowKey: string, key: string) {
-  return `${rowKey}.${key}`
-}
-
-function competitorNameProp(index: number) {
-  return `${ck()}.${index}.${nk()}`
-}
-
-function competitorMetricProp(index: number, key: string) {
-  return `${ck()}.${index}.${key}`
-}
-
-function cellComponent(col: ProTableFormColumn) {
-  return col.component === 'formatted-number' ? FormattedNumberInput : 'el-input'
-}
-
-function cellBind(col: ProTableFormColumn): Record<string, unknown> {
-  const cp = col.componentProps || {}
-  if (col.component === 'formatted-number') {
-    return {
-      integerDigits: 5,
-      decimalPlaces: 6,
-      rounding: 'round',
-      inputLimit: true,
-      ...cp,
-    }
-  }
-  return { ...cp }
-}
-
-function firstColumnScope(slotProps: { row: TableRow }) {
-  const r = slotProps.row
-  if (r._type === 'fixed') {
-    return {
-      row: r,
-      rowType: 'fixed' as const,
-      rowKey: r.rowKey,
-      rowLabel: r.rowLabel,
-    }
-  }
-  const idx = r._index
-  return {
-    row: r,
-    rowType: 'competitor' as const,
-    rowIndex: idx,
-    value: getCompetitorName(idx),
-    updateValue: (v: string) => setCompetitorName(idx, v),
-  }
-}
-
-const mergedRules = computed(() => {
-  const r: Record<string, unknown[]> = {}
-  const req = (title: string) => [{ required: true, message: `请输入${title}`, trigger: 'blur' }]
-
-  for (const fr of props.fixedRows) {
-    for (const col of props.columns) {
-      if (col.rules) {
-        r[`${fr.rowKey}.${col.key}`] = col.rules as unknown[]
-      } else if (col.required) {
-        r[`${fr.rowKey}.${col.key}`] = req(col.title)
-      }
-    }
-  }
-  const list = competitorList()
-  list.forEach((_, i) => {
-    r[`${ck()}.${i}.${nk()}`] = req('友商名称')
-    for (const col of props.columns) {
-      if (col.rules) {
-        r[`${ck()}.${i}.${col.key}`] = col.rules as unknown[]
-      } else if (col.required) {
-        r[`${ck()}.${i}.${col.key}`] = req(col.title)
-      }
-    }
-  })
-  return { ...r, ...(props.rules || {}) }
+/** 将 columns 扁平化，保留 _key 用于 template v-for key */
+const flatColumns = computed<(ProTableFormColumn & { _key: string })[]>(() => {
+  return props.columns.map((col, i) => ({
+    ...col,
+    _key: col.key || `__col-${i}`,
+  }))
 })
 
-function validate(): Promise<boolean> {
-  return new Promise((resolve) => {
-    const f = formRef.value
-    if (!f || typeof f.validate !== 'function') {
-      resolve(true)
-      return
-    }
-    f.validate((valid: boolean) => {
-      resolve(valid)
-    })
-  })
-}
-
-function clearValidate(propsArg?: string | string[]) {
-  formRef.value?.clearValidate?.(propsArg)
-}
+const tableRef = ref<{ clearSelection: () => void } | null>(null)
 
-defineExpose({
+const action = {
   validate,
   clearValidate,
-  addCompetitor,
-  removeCompetitor,
-})
+  addRow: handleAddRow,
+  removeRow: handleRemoveRow,
+  getRows: () => [...currentModelValue.value],
+  getRowCount: () => currentModelValue.value.length,
+  getTable: () => tableRef.value,
+  getModelValue: () => [...currentModelValue.value],
+  setModelValue: (val: Record<string, unknown>[]) => emit('update:modelValue', val),
+  getFormRef: () => formRef.value,
+}
+
+defineExpose(action)
+emit('register', action)
 </script>
 
 <style scoped>
@@ -518,10 +428,9 @@ defineExpose({
   margin-left: 0 !important;
   line-height: normal;
 }
-.ecp-pro-table-form__fixed-label {
-  color: #303133;
-  font-size: 14px;
-}
+/* .ecp-pro-table-form__cell-item :deep(.el-form-item__error) {
+  display: none;
+} */
 .ecp-pro-table-form__req {
   color: #f56c6c;
   margin-right: 2px;
@@ -530,26 +439,13 @@ defineExpose({
   font-weight: 500;
   color: #606266;
 }
-.ecp-pro-table-form__action-title {
-  margin-right: 8px;
-  font-size: 13px;
-  color: #606266;
-}
-.ecp-pro-table-form__add-btn {
-  padding: 0;
-  font-size: 14px;
-}
-.ecp-pro-table-form__del-btn {
-  padding: 0;
-  color: #909399;
-}
-.ecp-pro-table-form__del-btn:not(:disabled) {
-  color: #409eff;
-}
 </style>
 
 <style>
 .ecp-pro-table-form .ecp-pro-table-form__header-cell {
   background: #f5f7fa !important;
 }
+.ecp-pro-table-form__cell-item .el-form-item__error {
+  position: relative;
+}
 </style>