foucui 1.0.1

package/components/QiuTable/index.vue

@@ -0,0 +1,3503 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-table"
+    tabindex="0"
+    :class="[
+      {
+        'qiu-table--border': border === true || border === 'full' || border === 'default',
+        'qiu-table--border-full': border === 'full' || border === true,
+        'qiu-table--border-outer': border === 'outer',
+        'qiu-table--border-inner': border === 'inner',
+        'qiu-table--border-none': border === 'none' || border === false,
+        'qiu-table--stripe': stripe,
+        'qiu-table--round': round,
+        'qiu-table--fullscreen': isFullscreen,
+        'qiu-table--toolbar': showToolbarArea,
+        'qiu-table--hover': resolveRowHover(rowConfig),
+        'qiu-table--fixed-height': height != null || maxHeight != null,
+        'qiu-table--scroll-x': hasScrollX,
+        'qiu-table--scroll-y': scrollbarSize > 0,
+      },
+      size ? `qiu-table--${size}` : '',
+    ]"
+    :style="rootTableStyle"
+    @keydown="onTableKeydown"
+  >
+    <div v-if="showToolbarArea" class="qiu-table__toolbar">
+      <div class="qiu-table__toolbar-left">
+        <slot name="toolbar-left" />
+        <slot name="toolbar" />
+        <div v-if="toolsPlacement === 'left'" class="qiu-table__toolbar-builtin">
+          <template v-for="tool in toolButtonList" :key="tool.name">
+            <button
+              v-if="tool.show"
+              type="button"
+              class="qiu-table__toolbar-icon"
+              :title="tool.title"
+              @click="tool.onClick"
+            >
+              <qiu-icon :icon="tool.icon" />
+            </button>
+          </template>
+          <qiu-dropdown v-if="copyEnabled" class="qiu-table__toolbar-dropdown">
+            <button type="button" class="qiu-table__toolbar-icon" :title="translate('复制')">
+              <qiu-icon icon="file-copy-line" />
+            </button>
+            <template #dropdown>
+              <qiu-dropdown-menu>
+                <qiu-dropdown-item @click="copyTableData('vertical')">
+                  {{ translate('纵向复制') }}
+                </qiu-dropdown-item>
+                <qiu-dropdown-item @click="copyTableData('horizontal')">
+                  {{ translate('横向复制') }}
+                </qiu-dropdown-item>
+              </qiu-dropdown-menu>
+            </template>
+          </qiu-dropdown>
+        </div>
+        <component
+          :is="tool.component"
+          v-for="tool in customToolsByPosition('left')"
+          :key="tool.name"
+          v-bind="tool.props"
+        />
+      </div>
+      <div class="qiu-table__toolbar-center">
+        <slot name="toolbar-center" />
+        <div v-if="toolsPlacement === 'center'" class="qiu-table__toolbar-builtin">
+          <template v-for="tool in toolButtonList" :key="tool.name">
+            <button
+              v-if="tool.show"
+              type="button"
+              class="qiu-table__toolbar-icon"
+              :title="tool.title"
+              @click="tool.onClick"
+            >
+              <qiu-icon :icon="tool.icon" />
+            </button>
+          </template>
+          <qiu-dropdown v-if="copyEnabled" class="qiu-table__toolbar-dropdown">
+            <button type="button" class="qiu-table__toolbar-icon" :title="translate('复制')">
+              <qiu-icon icon="file-copy-line" />
+            </button>
+            <template #dropdown>
+              <qiu-dropdown-menu>
+                <qiu-dropdown-item @click="copyTableData('vertical')">
+                  {{ translate('纵向复制') }}
+                </qiu-dropdown-item>
+                <qiu-dropdown-item @click="copyTableData('horizontal')">
+                  {{ translate('横向复制') }}
+                </qiu-dropdown-item>
+              </qiu-dropdown-menu>
+            </template>
+          </qiu-dropdown>
+        </div>
+        <component
+          :is="tool.component"
+          v-for="tool in customToolsByPosition('center')"
+          :key="tool.name"
+          v-bind="tool.props"
+        />
+      </div>
+      <div class="qiu-table__toolbar-right">
+        <slot name="toolbar-tools" />
+        <slot name="toolbar-right" />
+        <div v-if="toolsPlacement === 'right'" class="qiu-table__toolbar-builtin">
+          <template v-for="tool in toolButtonList" :key="tool.name">
+            <button
+              v-if="tool.show"
+              type="button"
+              class="qiu-table__toolbar-icon"
+              :title="tool.title"
+              @click="tool.onClick"
+            >
+              <qiu-icon :icon="tool.icon" />
+            </button>
+          </template>
+          <qiu-dropdown v-if="copyEnabled" class="qiu-table__toolbar-dropdown">
+            <button type="button" class="qiu-table__toolbar-icon" :title="translate('复制')">
+              <qiu-icon icon="file-copy-line" />
+            </button>
+            <template #dropdown>
+              <qiu-dropdown-menu>
+                <qiu-dropdown-item @click="copyTableData('vertical')">
+                  {{ translate('纵向复制') }}
+                </qiu-dropdown-item>
+                <qiu-dropdown-item @click="copyTableData('horizontal')">
+                  {{ translate('横向复制') }}
+                </qiu-dropdown-item>
+              </qiu-dropdown-menu>
+            </template>
+          </qiu-dropdown>
+        </div>
+        <component
+          :is="tool.component"
+          v-for="tool in customToolsByPosition('right')"
+          :key="tool.name"
+          v-bind="tool.props"
+        />
+      </div>
+    </div>
+
+    <div v-if="customPanelOpen" class="qiu-table__custom-panel">
+      <label v-for="col in customizableColumns" :key="col._key" class="qiu-table__custom-item">
+        <input
+          type="checkbox"
+          :checked="columnVisibleMap[col._key] !== false"
+          @change="toggleColumnVisible(col._key, ($event.target as HTMLInputElement).checked)"
+        />
+        <span>{{ col.label || col._key }}</span>
+      </label>
+    </div>
+
+    <qiu-dialog
+      v-model="exportDialogVisible"
+      :title="translate('导出数据')"
+      width="480px"
+      align-center
+      :show-minimize="false"
+      :show-fullscreen="false"
+    >
+      <div class="qiu-table__export-dialog">
+        <div class="qiu-table__export-section">
+          <div class="qiu-table__export-label">{{ translate('导出字段') }}</div>
+          <div class="qiu-table__export-fields">
+            <label class="qiu-table__export-field">
+              <input
+                type="checkbox"
+                :checked="exportAllChecked"
+                :indeterminate.prop="exportIndeterminate"
+                @change="toggleExportAll(($event.target as HTMLInputElement).checked)"
+              />
+              <span>{{ translate('全选') }}</span>
+            </label>
+            <label
+              v-for="col in exportableColumns"
+              :key="col._key"
+              class="qiu-table__export-field"
+            >
+              <input
+                type="checkbox"
+                :checked="exportFieldKeys.includes(col._key)"
+                @change="
+                  toggleExportField(col._key, ($event.target as HTMLInputElement).checked)
+                "
+              />
+              <span>{{ col.label || resolveColumnProp(col) || col._key }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="qiu-table__export-section">
+          <div class="qiu-table__export-label">{{ translate('文件格式') }}</div>
+          <div class="qiu-table__export-formats">
+            <label
+              v-for="fmt in exportFormats"
+              :key="fmt.value"
+              class="qiu-table__export-format"
+              :class="{ 'is-active': exportFormat === fmt.value }"
+            >
+              <input v-model="exportFormat" type="radio" :value="fmt.value" />
+              <span>{{ fmt.label }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="qiu-table__export-section">
+          <div class="qiu-table__export-label">{{ translate('导出范围') }}</div>
+          <div class="qiu-table__export-modes">
+            <label
+              v-for="m in exportModeOptions"
+              :key="m.value"
+              class="qiu-table__export-mode"
+              :class="{ 'is-active': exportMode === m.value }"
+            >
+              <input v-model="exportMode" type="radio" :value="m.value" />
+              <span>{{ m.label }}</span>
+            </label>
+          </div>
+          <div v-if="exportMode === 'range'" class="qiu-table__export-range">
+            <span>{{ translate('页码') }}</span>
+            <input
+              v-model.number="exportStartPage"
+              type="number"
+              :min="1"
+              :max="pageCount"
+              class="qiu-table__export-range-input"
+            />
+            <span>-</span>
+            <input
+              v-model.number="exportEndPage"
+              type="number"
+              :min="exportStartPage"
+              :max="pageCount"
+              class="qiu-table__export-range-input"
+            />
+            <span>{{ translate('（共') }} {{ pageCount }} {{ translate('页）') }}</span>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <qiu-button @click="exportDialogVisible = false">{{ translate('取消') }}</qiu-button>
+        <qiu-button type="primary" :disabled="!exportFieldKeys.length" @click="confirmExport">
+          {{ translate('下载') }}
+        </qiu-button>
+      </template>
+    </qiu-dialog>
+
+    <input
+      ref="importInputRef"
+      type="file"
+      accept=".csv,.xls,.xlsx,text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+      class="qiu-table__import-input"
+      @change="onImportFile"
+    />
+
+    <div class="qiu-table__main" :style="mainStyle">
+      <QiuLoadingSpinner
+        v-if="loading"
+        class="qiu-table__loading"
+        :text="loadingText || `${translate('加载中')}...`"
+        :effect="loadingEffect"
+        :transparent="loadingTransparent"
+      />
+      <!-- Header -->
+      <div
+        ref="headerWrapRef"
+        class="qiu-table__header-wrap"
+      >
+        <table class="qiu-table__inner qiu-table__header-table" :style="tableMinWidthStyle">
+          <colgroup>
+            <col v-if="resolvedShowExpand" style="width: 48px" />
+            <col v-if="resolvedShowRadio" style="width: 48px" />
+            <col v-if="resolvedShowSelection" style="width: 48px" />
+            <col v-if="resolvedShowIndex" style="width: 55px" />
+            <col
+              v-if="virtualXEnabled && virtualXPad.left > 0"
+              :style="{ width: `${virtualXPad.left}px` }"
+            />
+            <col
+              v-for="col in displayLeafColumns"
+              :key="`hcol-${col._key}`"
+              :style="resolvedColStyle(col)"
+            />
+            <col
+              v-if="virtualXEnabled && virtualXPad.right > 0"
+              :style="{ width: `${virtualXPad.right}px` }"
+            />
+          </colgroup>
+          <thead>
+            <tr v-for="(row, ri) in headerRows" :key="`hr-${ri}`">
+              <th
+                v-if="resolvedShowExpand && ri === 0"
+                class="qiu-table__cell qiu-table__cell--header qiu-table__cell--expand qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('expand')"
+                :style="{ left: '0px' }"
+                :rowspan="headerRows.length"
+              />
+              <th
+                v-if="resolvedShowRadio && ri === 0"
+                class="qiu-table__cell qiu-table__cell--header qiu-table__cell--radio qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('radio')"
+                :style="{ left: `${fixedLeftOffset('radio')}px` }"
+                :rowspan="headerRows.length"
+              />
+              <th
+                v-if="resolvedShowSelection && ri === 0"
+                class="qiu-table__cell qiu-table__cell--header qiu-table__cell--selection qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('selection')"
+                :style="{ left: `${fixedLeftOffset('selection')}px` }"
+                :rowspan="headerRows.length"
+              >
+                <qiu-checkbox
+                  :model-value="isAllSelected"
+                  :indeterminate="isIndeterminate"
+                  @change="(v) => toggleSelectAll(!!v)"
+                />
+              </th>
+              <th
+                v-if="resolvedShowIndex && ri === 0"
+                class="qiu-table__cell qiu-table__cell--header qiu-table__cell--index qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('index')"
+                :style="{ left: `${fixedLeftOffset('index')}px` }"
+                :rowspan="headerRows.length"
+              >
+                {{ translate('序号') }}
+              </th>
+              <th
+                v-if="virtualXEnabled && virtualXPad.left > 0 && ri === 0"
+                :rowspan="headerRows.length"
+                class="qiu-table__cell qiu-table__cell--header"
+              />
+              <th
+                v-for="(cell, ci) in row"
+                :key="`th-${ri}-${ci}-${cell.column._key}`"
+                class="qiu-table__cell qiu-table__cell--header"
+                :class="[
+                  cell.column.className,
+                  cell.column.headerClassName,
+                  cell.column.headerAlign
+                    ? `is-align-${cell.column.headerAlign}`
+                    : `is-align-${cell.column.align || headerAlign || align || 'left'}`,
+                  {
+                    'qiu-table__cell--sortable': cell.isLeaf && !!cell.column.sortable,
+                    'qiu-table__cell--col-drag': cell.isLeaf && columnDragEnabled,
+                    ...(cell.isLeaf ? fixedCellClass(cell.column as any) : {}),
+                  },
+                ]"
+                :colspan="cell.colspan"
+                :rowspan="cell.rowspan"
+                :style="headerCellStyle(cell)"
+                :data-col-key="cell.isLeaf ? cell.column._key : undefined"
+                @click="cell.isLeaf && onHeaderClick(cell.column as any, $event)"
+              >
+                <div class="qiu-table__th">
+                  <qiu-icon
+                    v-if="cell.isLeaf && getShowIcon() && canEditCol(cell.column as any)"
+                    icon="edit-line"
+                    class="qiu-table__edit-icon"
+                    title="edit"
+                  />
+                  <span class="qiu-table__label">{{ cell.label }}</span>
+                  <span
+                    v-if="cell.isLeaf && cell.column.sortable"
+                    class="qiu-table__sort"
+                    :class="sortClass(cell.column as any)"
+                  >
+                    <i class="qiu-table__caret qiu-table__caret--up" />
+                    <i class="qiu-table__caret qiu-table__caret--down" />
+                    <em v-if="sortPriority(cell.column as any)" class="qiu-table__sort-num">
+                      {{ sortPriority(cell.column as any) }}
+                    </em>
+                  </span>
+                  <button
+                    v-if="cell.isLeaf && isFilterable(cell.column as any)"
+                    type="button"
+                    class="qiu-table__filter-btn"
+                    :class="{
+                      'is-active':
+                        isFilterActive(cell.column as any) || openFilterKey === cell.column._key,
+                    }"
+                    @click.stop="toggleFilterPanel(cell.column as any, $event)"
+                  >
+                    <svg viewBox="0 0 1024 1024" width="12" height="12">
+                      <path
+                        fill="currentColor"
+                        d="M128 192h768l-288 352v256l-192 64V544L128 192z"
+                      />
+                    </svg>
+                  </button>
+                  <span
+                    v-if="cell.isLeaf && isColResizable(cell.column as any)"
+                    class="qiu-table__resizer"
+                    @mousedown="onColResizeStart(cell.column as any, $event)"
+                  />
+                </div>
+              </th>
+              <th
+                v-if="virtualXEnabled && virtualXPad.right > 0 && ri === 0"
+                :rowspan="headerRows.length"
+                class="qiu-table__cell qiu-table__cell--header"
+              />
+            </tr>
+          </thead>
+        </table>
+      </div>
+
+      <!-- Body -->
+      <div
+        ref="bodyWrapRef"
+        class="qiu-table__body-wrap"
+        @scroll="onBodyScroll"
+        @contextmenu.prevent="onBodyContextMenu"
+      >
+        <table ref="tableRef" class="qiu-table__inner qiu-table__body-table" :style="tableMinWidthStyle">
+          <colgroup>
+            <col v-if="resolvedShowExpand" style="width: 48px" />
+            <col v-if="resolvedShowRadio" style="width: 48px" />
+            <col v-if="resolvedShowSelection" style="width: 48px" />
+            <col v-if="resolvedShowIndex" style="width: 55px" />
+            <col
+              v-if="virtualXEnabled && virtualXPad.left > 0"
+              :style="{ width: `${virtualXPad.left}px` }"
+            />
+            <col
+              v-for="col in displayLeafColumns"
+              :key="`bcol-${col._key}`"
+              :style="resolvedColStyle(col)"
+            />
+            <col
+              v-if="virtualXEnabled && virtualXPad.right > 0"
+              :style="{ width: `${virtualXPad.right}px` }"
+            />
+          </colgroup>
+          <tbody ref="tbodyRef" class="qiu-table__body">
+            <tr
+              v-if="virtualEnabled && virtualRange.padTop > 0"
+              class="qiu-table__virtual-pad"
+              aria-hidden="true"
+            >
+              <td :colspan="totalColspan">
+                <div
+                  class="qiu-table__virtual-pad-space"
+                  :style="{ height: `${virtualRange.padTop}px` }"
+                />
+              </td>
+            </tr>
+            <template v-for="item in displayRowItems" :key="getRowId(item.flat.row) || item.flat.flatIndex">
+            <tr
+              class="qiu-table__row"
+              :class="[
+                {
+                  'qiu-table__row--striped': stripe && item.flat.flatIndex % 2 === 1,
+                  'is-selected': isRowSelected(item.flat.row),
+                  'is-current': currentRowId === getRowId(item.flat.row),
+                  'is-radio-checked': isRadioChecked(item.flat.row),
+                  'is-dirty': keepSourceEnabled && isUpdateByRow(item.flat.row),
+                },
+                resolveRowClassName(item.flat.row, item.rowIndex),
+              ]"
+              :data-row-key="getRowId(item.flat.row)"
+              @click="onRowClick(item.flat.row)"
+            >
+              <td
+                v-if="resolvedShowExpand"
+                class="qiu-table__cell qiu-table__cell--expand qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('expand')"
+                :style="{ left: '0px' }"
+                @click.stop="toggleRowExpand(item.flat.row)"
+              >
+                <div class="qiu-table__cell-inner">
+                  <button type="button" class="qiu-table__tree-toggle">
+                    <qiu-icon
+                      :icon="isRowExpand(item.flat.row) ? 'arrow-down-s-fill' : 'arrow-right-s-fill'"
+                    />
+                  </button>
+                </div>
+              </td>
+              <td
+                v-if="resolvedShowRadio"
+                class="qiu-table__cell qiu-table__cell--radio qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('radio')"
+                :style="{ left: `${fixedLeftOffset('radio')}px` }"
+                @click.stop="onRadioChange(item.flat.row)"
+              >
+                <div class="qiu-table__cell-inner">
+                  <input
+                    type="radio"
+                    class="qiu-table__radio"
+                    :checked="isRadioChecked(item.flat.row)"
+                    :name="radioGroupName"
+                    @change="onRadioChange(item.flat.row)"
+                  />
+                </div>
+              </td>
+              <td
+                v-if="resolvedShowSelection"
+                class="qiu-table__cell qiu-table__cell--selection qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('selection')"
+                :style="{ left: `${fixedLeftOffset('selection')}px` }"
+                @click.stop
+              >
+                <div class="qiu-table__cell-inner">
+                  <qiu-checkbox
+                    :model-value="isRowSelected(item.flat.row)"
+                    @change="(v) => toggleRowSelection(item.flat.row, !!v)"
+                  />
+                </div>
+              </td>
+              <td
+                v-if="resolvedShowIndex"
+                class="qiu-table__cell qiu-table__cell--index qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('index')"
+                :style="{ left: `${fixedLeftOffset('index')}px` }"
+              >
+                <div class="qiu-table__cell-inner">{{ item.flat.flatIndex + 1 }}</div>
+              </td>
+              <td v-if="virtualXEnabled && virtualXPad.left > 0" class="qiu-table__cell" />
+              <template
+                v-for="(col, colIndex) in displayLeafColumns"
+                :key="`td-${col._key}-${getRowId(item.flat.row)}`"
+              >
+                <td
+                  v-if="cellSpan(item.flat, item.rowIndex, col, realColIndex(col)).visible"
+                  class="qiu-table__cell"
+                  :class="[
+                    col.className,
+                    resolveCellClassName(item.flat.row, col, item.rowIndex, realColIndex(col)),
+                    `is-align-${col.align || align || 'left'}`,
+                    {
+                      'qiu-table__cell--ellipsis': shouldEllipsis(col),
+                      'is-editing': isEditing(item.flat.row, col),
+                      'is-input-fill': isInputFill(item.flat.row, col),
+                      'is-editable': canEditCol(col),
+                      'is-valid-error': !!cellError(item.flat.row, col),
+                      'is-active-cell': isActiveCell(item.flat.row, col),
+                      'is-area-cell': isCellInArea(item.flat.row, col),
+                      ...fixedCellClass(col),
+                    },
+                  ]"
+                  :style="bodyCellStyle(col)"
+                  :title="cellError(item.flat.row, col) || undefined"
+                  :rowspan="cellSpan(item.flat, item.rowIndex, col, realColIndex(col)).rowspan"
+                  :colspan="cellSpan(item.flat, item.rowIndex, col, realColIndex(col)).colspan"
+                  @click="onCellClick(item.flat.row, col, $event)"
+                  @dblclick="onCellDblclick(item.flat.row, col)"
+                >
+                  <div
+                    class="qiu-table__cell-inner"
+                    :class="{
+                      'qiu-table__cell-inner--input-fill': isInputFill(item.flat.row, col),
+                    }"
+                  >
+                    <span v-if="col.dragSort" class="qiu-table__drag-handle">
+                      <qiu-icon icon="drag-move-2-line" />
+                    </span>
+
+                    <span
+                      v-else-if="tree && col.treeNode"
+                      class="qiu-table__tree-cell"
+                      :style="{ paddingLeft: `${item.flat.level * 18}px` }"
+                    >
+                      <button
+                        v-if="item.flat.hasChildren"
+                        type="button"
+                        class="qiu-table__tree-toggle"
+                        @click.stop="toggleExpand(item.flat.row)"
+                      >
+                        <qiu-icon
+                          :icon="item.flat.expanded ? 'arrow-down-s-fill' : 'arrow-right-s-fill'"
+                        />
+                      </button>
+                      <span v-else class="qiu-table__tree-placeholder" />
+                      <cell-content
+                        :row="item.flat.row"
+                        :col="col"
+                        :index="item.flat.flatIndex"
+                      />
+                    </span>
+
+                    <slot
+                      v-else-if="col.slot && $slots[col.slot]"
+                      :name="col.slot"
+                      v-bind="
+                        mapSlotScope(
+                          item.flat.row,
+                          col,
+                          item.flat.flatIndex,
+                          item.flat.level
+                        )
+                      "
+                    />
+
+                    <component
+                      :is="col._defaultSlot"
+                      v-else-if="col._defaultSlot"
+                      v-bind="
+                        mapSlotScope(
+                          item.flat.row,
+                          col,
+                          item.flat.flatIndex,
+                          item.flat.level
+                        )
+                      "
+                    />
+
+                    <div
+                      v-else
+                      class="qiu-table__editor-host"
+                      :class="{
+                        'qiu-table__editor-host--input-fill': isInputFill(item.flat.row, col),
+                      }"
+                    >
+                      <cell-content
+                        :row="item.flat.row"
+                        :col="col"
+                        :index="item.flat.flatIndex"
+                      />
+                    </div>
+                  </div>
+                </td>
+              </template>
+              <td v-if="virtualXEnabled && virtualXPad.right > 0" class="qiu-table__cell" />
+            </tr>
+            <tr v-if="resolvedShowExpand && isRowExpand(item.flat.row)" class="qiu-table__expand-row">
+              <td :colspan="totalColspan" class="qiu-table__cell qiu-table__cell--expand-content">
+                <div class="qiu-table__expand-content">
+                  <slot name="expand" :row="item.flat.row" :$index="item.flat.flatIndex">
+                    <pre class="qiu-table__expand-json">{{ JSON.stringify(item.flat.row, null, 2) }}</pre>
+                  </slot>
+                </div>
+              </td>
+            </tr>
+            </template>
+            <tr
+              v-if="virtualEnabled && virtualRange.padBottom > 0"
+              class="qiu-table__virtual-pad"
+              aria-hidden="true"
+            >
+              <td :colspan="totalColspan">
+                <div
+                  class="qiu-table__virtual-pad-space"
+                  :style="{ height: `${virtualRange.padBottom}px` }"
+                />
+              </td>
+            </tr>
+            <tr v-if="!pagedRows.length" class="qiu-table__row qiu-table__row--empty">
+              <td class="qiu-table__cell qiu-table__cell--empty" :colspan="totalColspan">
+                <slot name="empty">{{ emptyText || translate('暂无数据') }}</slot>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <div
+        v-if="showFooter && footerRows.length"
+        ref="footerWrapRef"
+        class="qiu-table__footer-wrap"
+      >
+        <table class="qiu-table__inner qiu-table__footer-table" :style="tableMinWidthStyle">
+          <colgroup>
+            <col v-if="resolvedShowExpand" style="width: 48px" />
+            <col v-if="resolvedShowRadio" style="width: 48px" />
+            <col v-if="resolvedShowSelection" style="width: 48px" />
+            <col v-if="resolvedShowIndex" style="width: 55px" />
+            <col
+              v-if="virtualXEnabled && virtualXPad.left > 0"
+              :style="{ width: `${virtualXPad.left}px` }"
+            />
+            <col
+              v-for="col in displayLeafColumns"
+              :key="`fcol-${col._key}`"
+              :style="resolvedColStyle(col)"
+            />
+            <col
+              v-if="virtualXEnabled && virtualXPad.right > 0"
+              :style="{ width: `${virtualXPad.right}px` }"
+            />
+          </colgroup>
+          <tbody>
+            <tr v-for="(frow, fi) in footerRows" :key="`fr-${fi}`" class="qiu-table__row">
+              <td
+                v-if="resolvedShowExpand"
+                class="qiu-table__cell qiu-table__cell--footer qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('expand')"
+                :style="{ left: '0px' }"
+              >
+                <div class="qiu-table__cell-inner" />
+              </td>
+              <td
+                v-if="resolvedShowRadio"
+                class="qiu-table__cell qiu-table__cell--footer qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('radio')"
+                :style="{ left: `${fixedLeftOffset('radio')}px` }"
+              >
+                <div class="qiu-table__cell-inner" />
+              </td>
+              <td
+                v-if="resolvedShowSelection"
+                class="qiu-table__cell qiu-table__cell--footer qiu-table__cell--selection qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('selection')"
+                :style="{ left: `${fixedLeftOffset('selection')}px` }"
+              >
+                <div class="qiu-table__cell-inner" />
+              </td>
+              <td
+                v-if="resolvedShowIndex"
+                class="qiu-table__cell qiu-table__cell--footer qiu-table__cell--index qiu-table__cell--fixed-left"
+                :class="specialLeftLastClass('index')"
+                :style="{ left: `${fixedLeftOffset('index')}px` }"
+              >
+                <div class="qiu-table__cell-inner" />
+              </td>
+              <td
+                v-for="(text, ci) in frow"
+                :key="`fd-${fi}-${ci}`"
+                class="qiu-table__cell qiu-table__cell--footer"
+                :class="[
+                  `is-align-${leafColumns[ci]?.footerAlign || leafColumns[ci]?.align || footerAlign || align || 'left'}`,
+                  leafColumns[ci]?.footerClassName,
+                  fixedCellClass(leafColumns[ci]),
+                ]"
+                :style="bodyCellStyle(leafColumns[ci])"
+              >
+                <div class="qiu-table__cell-inner">{{ text }}</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-if="pagerEnabled" class="qiu-table__pager">
+      <qiu-pagination
+        v-model:current-page="innerPage"
+        v-model:page-size="innerPageSize"
+        :total="pagerTotal"
+        :page-sizes="pagerConfig?.pageSizes || [10, 20, 50, 100]"
+        :background="pagerConfig?.background !== false"
+        :small="pagerConfig?.small"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="onPageChange"
+        @size-change="onSizeChange"
+      />
+    </div>
+
+    <Teleport to="body">
+      <div v-if="openFilterKey" class="qiu-table__filter-mask" @mousedown="closeFilterPanel" />
+      <div
+        v-if="openFilterKey && filterPanelPos"
+        class="qiu-table__filter-panel"
+        :style="{ left: `${filterPanelPos.left}px`, top: `${filterPanelPos.top}px` }"
+        @mousedown.stop
+      >
+        <div class="qiu-table__filter-head">
+          <span class="qiu-table__filter-title">{{ translate('筛选') }}</span>
+          <div v-if="openFilterOptions.length" class="qiu-table__filter-checkall">
+            <qiu-checkbox
+              :model-value="isFilterAllChecked"
+              :indeterminate="isFilterIndeterminate"
+              @change="(v) => toggleFilterAll(!!v)"
+            >
+              {{ translate('全选') }}
+            </qiu-checkbox>
+          </div>
+        </div>
+        <div class="qiu-table__filter-list">
+          <div
+            v-for="opt in openFilterOptions"
+            :key="String(opt.value)"
+            class="qiu-table__filter-item"
+          >
+            <qiu-checkbox
+              :model-value="isFilterOptionChecked(openFilterKey, opt.value)"
+              @change="(v) => toggleFilterOption(openFilterKey!, opt.value, !!v)"
+            >
+              {{ opt.text }}
+            </qiu-checkbox>
+          </div>
+          <div v-if="!openFilterOptions.length" class="qiu-table__filter-empty">
+            {{ translate('无筛选项') }}
+          </div>
+        </div>
+        <div class="qiu-table__filter-actions">
+          <button type="button" class="qiu-table__filter-action is-plain" @click="resetOpenFilter">
+            {{ translate('重置') }}
+          </button>
+          <button type="button" class="qiu-table__filter-action" @click="confirmFilter">
+            {{ translate('确定') }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="ctxMenu.visible" class="qiu-table__filter-mask" @mousedown="closeCtxMenu" />
+      <div
+        v-if="ctxMenu.visible"
+        class="qiu-table__ctx-menu"
+        :style="{ left: `${ctxMenu.x}px`, top: `${ctxMenu.y}px` }"
+        @mousedown.stop
+      >
+        <template v-for="(group, gi) in ctxMenu.options" :key="gi">
+          <div v-if="gi > 0" class="qiu-table__ctx-divider" />
+          <button
+            v-for="item in group"
+            :key="item.code"
+            type="button"
+            class="qiu-table__ctx-item"
+            :disabled="item.disabled"
+            @click="onMenuItemClick(item)"
+          >
+            {{ item.name }}
+          </button>
+        </template>
+      </div>
+    </Teleport>
+
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuTable — 方案 A 自研，零 vxe 运行时
+ * Phase1–3: 编辑/多级头/表尾/分页 + 列宽/合并 + Grid级导入打印/虚拟滚动/菜单/校验
+ */
+import Sortable from 'sortablejs'
+import { translate } from '../../src/i18n'
+import QiuCheckbox from '../QiuCheckbox/index.vue'
+import QiuInput from '../QiuInput/index.vue'
+import QiuInputNumber from '../QiuInputNumber/index.vue'
+import QiuLoadingSpinner from '../QiuLoading/spinner.vue'
+import type { QiuLoadingEffect } from '../QiuLoading/types'
+import QiuPagination from '../QiuPagination/index.vue'
+import QiuSelect from '../QiuSelect/index.vue'
+import QiuSwitch from '../QiuSwitch/index.vue'
+import QiuTime from '../QiuTime/index.vue'
+import QiuTooltip from '../QiuTooltip/index.vue'
+import { QiuTableEditRenderer, QiuTableFormats, QiuTableRenderer } from './registry'
+import type {
+  QiuTableClipboardConfig,
+  QiuTableColumnConfig,
+  QiuTableColumnConfigExtra,
+  QiuTableEditConfig,
+  QiuTableExportConfig,
+  QiuTableFilterConfig,
+  QiuTableFlatRow,
+  QiuTableFooterMethod,
+  QiuTableHistoryConfig,
+  QiuTableKeyboardConfig,
+  QiuTableMergeCell,
+  QiuTablePagerConfig,
+  QiuTableRegisterContext,
+  QiuTableRegisteredColumn,
+  QiuTableRowConfig,
+  QiuTableSortConfig,
+  QiuTableSpanMethod,
+  QiuTableToolbarConfig,
+  QiuTableTooltipConfig,
+} from './types'
+import {
+  QIU_TABLE_REGISTER_KEY,
+  resolveColumnProp,
+  resolveEditRender,
+  resolveRowCurrent,
+  resolveRowHover,
+} from './types'
+import QiuDropdown from '../QiuDropdown/index.vue'
+import QiuDropdownMenu from '../QiuDropdown/QiuDropdownMenu.vue'
+import QiuDropdownItem from '../QiuDropdown/QiuDropdownItem.vue'
+import { qiuMsg } from '../QiuMsg'
+import {
+  buildHeaderRows,
+  computeRenderWidths,
+  computeTableMinWidth,
+  flattenLeafColumns,
+  getColumnSizeHints,
+  isFirstFixedRight,
+  isLastFixedLeft,
+  leftOffsetForColumn,
+  makeColumnKey,
+  parseWidth,
+  rightOffsetForColumn,
+  type LeafColumn,
+} from './columns'
+import { useTableArea } from './useArea'
+import { useTableEdit } from './useEdit'
+import {
+  compareRows,
+  useExpandRows,
+  useKeepSource,
+  useRadioRow,
+  type SortItem,
+} from './useExtras'
+import { useTableHistory } from './useHistory'
+import { applyMergeHeaderCells, buildMergeCoveredSet, resolveCellSpan } from './useMerge'
+import { bindAutoClearEdit, useColumnResize } from './useResize'
+import { useScrollSync } from './useScrollSync'
+import { useVirtualY } from './useVirtual'
+import type {
+  QiuTableCustomConfig,
+  QiuTableEditRules,
+  QiuTableMenuConfig,
+  QiuTableMenuItem,
+  QiuTableValidConfig,
+} from './utils'
+import { csvToObjects, validateCell } from './utils'
+import {
+  buildSheetMatrix,
+  exportSheet,
+  parseImportFile,
+  type QiuTableExportFormat,
+} from './export'
+
+defineOptions({ name: 'QiuTable' })
+
+type FilterOption = { text: string; value: any }
+
+const props = withDefaults(
+  defineProps<{
+    data: any[]
+    columns?: QiuTableColumnConfig[]
+    editable?: boolean
+    editTrigger?: 'click' | 'dblclick' | 'manual' | 'always'
+    editConfig?: QiuTableEditConfig
+    keyboardConfig?: QiuTableKeyboardConfig
+    clipboardConfig?: QiuTableClipboardConfig
+    tooltipConfig?: QiuTableTooltipConfig
+    exportConfig?: QiuTableExportConfig
+    historyConfig?: QiuTableHistoryConfig | boolean
+    sortConfig?: QiuTableSortConfig
+    filterConfig?: QiuTableFilterConfig
+    rowConfig?: QiuTableRowConfig
+    columnConfig?: QiuTableColumnConfigExtra
+    spanMethod?: QiuTableSpanMethod
+    mergeCells?: QiuTableMergeCell[]
+    /** 合并表头单元格（扁平表头额外合并；多级表头优先用 children） */
+    mergeHeaderCells?: QiuTableMergeCell[]
+    border?: boolean | 'full' | 'outer' | 'inner' | 'none' | 'default'
+    stripe?: boolean
+    round?: boolean
+    height?: string | number
+    maxHeight?: string | number
+    rowKey?: string | ((row: any) => string)
+    showIndex?: boolean
+    showSelection?: boolean
+    showRadio?: boolean
+    showExpand?: boolean
+    radioConfig?: import('./types').QiuTableRadioConfig
+    expandConfig?: import('./types').QiuTableExpandConfig
+    columnDragConfig?: import('./types').QiuTableColumnDragConfig
+    keepSource?: boolean
+    virtualXConfig?: boolean | { enabled?: boolean; gt?: number }
+    tree?: boolean
+    treeProps?: { children?: string; hasChildren?: string }
+    virtualY?: boolean
+    showToolbar?: boolean
+    showRefresh?: boolean
+    showExport?: boolean
+    showImport?: boolean
+    showPrint?: boolean
+    showCopy?: boolean
+    showFullscreen?: boolean
+    toolbarConfig?: QiuTableToolbarConfig | boolean
+    showFooter?: boolean
+    footerMethod?: QiuTableFooterMethod
+    footerData?: string[][]
+    pagerConfig?: QiuTablePagerConfig | boolean
+    gridOptions?: Record<string, any>
+    dragSort?: boolean
+    defaultExpandAll?: boolean
+    size?: 'large' | 'default' | 'small'
+    emptyText?: string
+    loading?: boolean
+    /** loading 文案 */
+    loadingText?: string
+    /** loading 动画，见 QIU_LOADING_EFFECTS（20 种） */
+    loadingEffect?: QiuLoadingEffect
+    /** loading 遮罩更透明 */
+    loadingTransparent?: boolean
+    /** 是否将剩余宽度分配给仅 minWidth 的弹性列（对齐 vxe fit） */
+    fit?: boolean
+    /** 表格级默认对齐 */
+    align?: 'left' | 'center' | 'right'
+    headerAlign?: 'left' | 'center' | 'right'
+    footerAlign?: 'left' | 'center' | 'right'
+    minHeight?: string | number
+    rowClassName?: string | ((params: { row: any; rowIndex: number }) => string)
+    cellClassName?:
+      | string
+      | ((params: { row: any; column: QiuTableColumnConfig; rowIndex: number; columnIndex: number }) => string)
+    customConfig?: QiuTableCustomConfig
+    menuConfig?: QiuTableMenuConfig
+    editRules?: QiuTableEditRules
+    validConfig?: QiuTableValidConfig
+    virtualYConfig?: boolean | { enabled?: boolean; gt?: number; oSize?: number; rowHeight?: number }
+  }>(),
+  {
+    columns: () => [],
+    editable: false,
+    editTrigger: 'click',
+    border: true,
+    stripe: false,
+    round: false,
+    showIndex: false,
+    showSelection: false,
+    showRadio: false,
+    showExpand: false,
+    keepSource: false,
+    fit: true,
+    tree: false,
+    treeProps: () => ({ children: 'children', hasChildren: 'hasChildren' }),
+    virtualY: false,
+    showToolbar: false,
+    showRefresh: true,
+    showExport: false,
+    showImport: false,
+    showPrint: false,
+    showCopy: false,
+    showFullscreen: true,
+    showFooter: false,
+    dragSort: false,
+    defaultExpandAll: true,
+    loading: false,
+    loadingText: '',
+    loadingEffect: 'spinner',
+    loadingTransparent: false,
+    mergeCells: () => [],
+    mergeHeaderCells: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  edit: [payload: { row: any; column: QiuTableColumnConfig; value: any }]
+  'cell-edit-start': [payload: { row: any; column: QiuTableColumnConfig }]
+  'cell-edit-end': [payload: { row: any; column: QiuTableColumnConfig; value: any }]
+  'row-dragend': [payload: any]
+  'checkbox-change': [payload: any]
+  'checkbox-all': [payload: any]
+  'selection-change': [payload: any[]]
+  'filter-change': [payload: Record<string, any[]>]
+  'sort-change': [payload: { prop: string; order: 'asc' | 'desc' | null }]
+  'page-change': [payload: { currentPage: number; pageSize: number }]
+  'current-change': [payload: { row: any | null }]
+  'resizable-change': [payload: { column: QiuTableColumnConfig; width: number }]
+  'menu-click': [payload: { menu: QiuTableMenuItem; row?: any; column?: QiuTableColumnConfig }]
+  'import-data': [payload: { rows: any[] }]
+  'radio-change': [payload: { row: any | null }]
+  'toggle-row-expand': [payload: { row: any; expanded: boolean }]
+  'column-dragend': [payload: { oldIndex: number; newIndex: number; columnKeys: string[] }]
+  refresh: []
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const tableRef = ref<HTMLTableElement | null>(null)
+const tbodyRef = ref<HTMLTableSectionElement | null>(null)
+const headerWrapRef = ref<HTMLDivElement | null>(null)
+const bodyWrapRef = ref<HTMLDivElement | null>(null)
+const footerWrapRef = ref<HTMLDivElement | null>(null)
+const selectionRows = ref<any[]>([])
+const registeredColumns = ref<QiuTableRegisteredColumn[]>([])
+const expandedKeys = ref<Set<string>>(new Set())
+const sortState = ref<{ prop: string; order: 'asc' | 'desc' | null }>({ prop: '', order: null })
+const sortList = ref<SortItem[]>([])
+const columnOrderKeys = ref<string[]>([])
+const scrollLeftX = ref(0)
+const hasScrollX = ref(false)
+const updateHasScrollX = () => {
+  const el = bodyWrapRef.value
+  hasScrollX.value = !!el && el.scrollWidth > el.clientWidth
+}
+const radioGroupName = `qiu-table-radio-${Math.random().toString(36).slice(2, 8)}`
+const filterValues = reactive<Record<string, any[]>>({})
+const filterDraft = reactive<Record<string, any[]>>({})
+const openFilterKey = ref<string | null>(null)
+const filterPanelPos = ref<{ left: number; top: number } | null>(null)
+const isFullscreen = ref(false)
+const innerPage = ref(1)
+const innerPageSize = ref(10)
+const currentRowId = ref<string | null>(null)
+const customPanelOpen = ref(false)
+const exportDialogVisible = ref(false)
+const exportFormat = ref<QiuTableExportFormat>('xlsx')
+const exportFieldKeys = ref<string[]>([])
+const exportMode = ref<QiuTableExportConfig['mode']>('all')
+const exportStartPage = ref(1)
+const exportEndPage = ref(1)
+const exportFormats = [
+  { value: 'xlsx' as const, label: 'Excel (.xlsx)' },
+  { value: 'xls' as const, label: 'Excel (.xls)' },
+  { value: 'csv' as const, label: 'CSV (.csv)' },
+]
+const exportModeOptions = [
+  { value: 'all' as const, label: translate('全部数据') },
+  { value: 'current' as const, label: translate('当前页') },
+  { value: 'selected' as const, label: translate('选中行') },
+  { value: 'range' as const, label: translate('指定页码范围') },
+]
+const columnVisibleMap = reactive<Record<string, boolean>>({})
+const importInputRef = ref<HTMLInputElement | null>(null)
+const validErrors = reactive<Record<string, string>>({})
+const ctxMenu = reactive<{
+  visible: boolean
+  x: number
+  y: number
+  options: QiuTableMenuItem[][]
+  row?: any
+  column?: QiuTableColumnConfig
+}>({ visible: false, x: 0, y: 0, options: [] })
+
+let sortableInst: Sortable | null = null
+let expandInitialized = false
+
+const layoutTick = ref(0)
+
+const { scrollbarSize, measureScrollbar, syncFromBody, scheduleLayout } = useScrollSync({
+  headerWrapRef,
+  bodyWrapRef,
+  footerWrapRef,
+  onLayoutChange: () => {
+    layoutTick.value++
+    updateHasScrollX()
+  },
+})
+
+const { columnWidths, getWidth, onResizeStart, setColumnWidth } = useColumnResize()
+
+const columnWidthDefaults = computed(() => ({
+  minWidth: props.columnConfig?.minWidth ?? 80,
+  maxWidth: props.columnConfig?.maxWidth ?? Number.POSITIVE_INFINITY,
+}))
+
+/** 无稳定主键时用对象身份兜底，避免多行 rowId 同为 '' 导致整列同时进入编辑 */
+let rowUidSeq = 0
+const rowUidMap = new WeakMap<object, string>()
+
+const getStableObjectId = (row: object) => {
+  let uid = rowUidMap.get(row)
+  if (!uid) {
+    uid = `__qiu_row_${++rowUidSeq}`
+    rowUidMap.set(row, uid)
+  }
+  return uid
+}
+
+const getRowId = (row: any): string => {
+  if (row == null) return ''
+  if (typeof props.rowKey === 'function') {
+    const v = props.rowKey(row)
+    if (v != null && String(v) !== '') return String(v)
+  } else {
+    const key =
+      props.rowConfig?.keyField ||
+      (typeof props.rowKey === 'string' && props.rowKey ? props.rowKey : '') ||
+      'id'
+    const v = row?.[key]
+    if (v != null && String(v) !== '') return String(v)
+  }
+  if (typeof row === 'object') return getStableObjectId(row)
+  return String(row)
+}
+
+const {
+  isRowExpand,
+  toggleRowExpand: toggleRowExpandRaw,
+  setRowExpand,
+  clearRowExpand,
+} = useExpandRows({ getRowId })
+
+const toggleRowExpand = (row: any) => {
+  if (props.expandConfig?.accordion) {
+    clearRowExpand()
+  }
+  const before = isRowExpand(row)
+  toggleRowExpandRaw(row)
+  emit('toggle-row-expand', { row, expanded: !before })
+}
+
+const { isRadioChecked, setRadioRow, clearRadioRow, radioRowId } = useRadioRow({ getRowId })
+
+const keepSourceEnabled = computed(() => !!props.keepSource)
+const {
+  snapshot: snapshotSource,
+  isUpdateByRow,
+  getUpdateRecords,
+  getInsertRecords,
+  reloadRow,
+} = useKeepSource({
+  enabled: () => keepSourceEnabled.value,
+  getRowId,
+  data: () => props.data,
+})
+
+const onRadioChange = (row: any) => {
+  setRadioRow(row)
+  emit('radio-change', { row })
+  if (props.radioConfig?.highlight !== false) {
+    currentRowId.value = getRowId(row)
+  }
+}
+
+const {
+  editing,
+  getColEditor,
+  getEditRender,
+  getProp,
+  canEditCol,
+  hasAlwaysEditor,
+  isEditing,
+  isInputFill,
+  startEdit,
+  clearEdit,
+  commitEdit: baseCommitEdit,
+  inEditGuard,
+  getTrigger,
+  getShowIcon,
+  getAutoClear,
+} = useTableEdit({
+  editable: () => props.editable,
+  editTrigger: () => props.editTrigger,
+  editConfig: () => props.editConfig,
+  getRowId,
+  emit: (event, payload) => emit(event as any, payload),
+})
+
+const historyEnabled = () => {
+  const h = props.historyConfig
+  if (h === true) return true
+  if (h && typeof h === 'object') return h.enabled !== false
+  return false
+}
+
+const {
+  push: pushHistory,
+  undo: undoEdit,
+  redo: redoEdit,
+  clear: clearHistory,
+  canUndo,
+  canRedo,
+} = useTableHistory({
+  enabled: historyEnabled,
+  size: () =>
+    typeof props.historyConfig === 'object' && props.historyConfig?.size
+      ? props.historyConfig.size
+      : 50,
+  findRow: (id) => findRowById(props.data, id),
+})
+
+const {
+  setActive,
+  clearArea,
+  isCellInArea,
+  isActiveCell,
+  moveActive,
+  buildTsv,
+  pasteTsv,
+  clearAreaValues,
+  activeCell,
+  areaBounds,
+} = useTableArea({
+  getRows: () => pagedRows.value.map((f) => f.row),
+  getColumns: () => leafColumns.value,
+  getRowId,
+})
+
+const kb = () => props.keyboardConfig || {}
+const clip = () => props.clipboardConfig || {}
+
+const shouldEllipsis = (col: QiuTableColumnConfig) => {
+  if (col.showOverflowTooltip === false) return false
+  if (props.tooltipConfig?.showAll === false) return false
+  return true
+}
+
+const resolveTooltipContent = (row: any, col: QiuTableColumnConfig) => {
+  const cellValue = getProp(col) != null ? row?.[getProp(col)!] : undefined
+  if (props.tooltipConfig?.contentMethod) {
+    const r = props.tooltipConfig.contentMethod({ row, column: col, cellValue })
+    if (r === null) return ''
+    if (r !== undefined) return r
+  }
+  return formatCell(row, col)
+}
+
+const commitEdit = async (row: any, col: QiuTableColumnConfig, value: any) => {
+  if (inEditGuard()) return
+  const prop = getProp(col)
+  if (prop && props.editRules?.[prop]) {
+    const err = await validateCell({
+      rules: props.editRules[prop],
+      cellValue: value,
+      row,
+      column: col,
+    })
+    const key = `${getRowId(row)}:${prop}`
+    if (err) {
+      validErrors[key] = err
+      return
+    }
+    delete validErrors[key]
+  }
+  if (prop != null) {
+    const oldValue = row[prop]
+    if (oldValue !== value) {
+      pushHistory({
+        rowId: getRowId(row),
+        prop,
+        oldValue,
+        newValue: value,
+      })
+    }
+  }
+  baseCommitEdit(row, col, value)
+}
+
+const cellError = (row: any, col: QiuTableColumnConfig) => {
+  const prop = getProp(col)
+  if (!prop) return ''
+  return validErrors[`${getRowId(row)}:${prop}`] || ''
+}
+
+bindAutoClearEdit({
+  rootRef,
+  enabled: () => props.editable && getAutoClear(),
+  clearEdit,
+})
+
+watch(
+  () => props.sortConfig?.defaultSort,
+  (ds) => {
+    if (!ds) return
+    const list = Array.isArray(ds) ? ds : [ds]
+    const mapped = list
+      .map((d) => ({
+        prop: d.prop || d.field || '',
+        order: (d.order || 'asc') as 'asc' | 'desc',
+      }))
+      .filter((d) => d.prop)
+    sortList.value = mapped
+    if (mapped[0]) sortState.value = { prop: mapped[0].prop, order: mapped[0].order }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.data,
+  () => snapshotSource(),
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.expandConfig?.expandAll,
+  (v) => {
+    if (v && resolvedShowExpand.value) setRowExpand(props.data || [], true)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.radioConfig?.checkRowKey,
+  (key) => {
+    if (key == null) return
+    const row = (props.data || []).find((r) => getRowId(r) === String(key))
+    if (row) setRadioRow(row)
+  },
+  { immediate: true }
+)
+
+const normalizeSize = (v: string | number) => {
+  if (typeof v === 'number' && Number.isFinite(v)) return `${v}px`
+  const s = String(v ?? '').trim()
+  if (!s) return s
+  // height="300" 这类无单位数字字符串需补 px，否则高度不生效、虚拟滚动失效
+  if (/^\d+(\.\d+)?$/.test(s)) return `${s}px`
+  return s
+}
+
+const resolvedTreeProps = computed(() => ({
+  children: props.treeProps?.children || 'children',
+  hasChildren: props.treeProps?.hasChildren || 'hasChildren',
+}))
+
+const configColumns = computed(() => {
+  const walk = (cols: QiuTableColumnConfig[]): QiuTableColumnConfig[] =>
+    cols.map((col) => ({
+      ...col,
+      label: col.label || col.title,
+      align: col.align || props.align || 'left',
+      headerAlign: col.headerAlign || props.headerAlign || col.align || props.align || 'left',
+      footerAlign: col.footerAlign || props.footerAlign || col.align || props.align || 'left',
+      children: col.children?.length ? walk(col.children) : undefined,
+    }))
+  return walk(props.columns || [])
+})
+
+const slotColumnsNormalized = computed((): LeafColumn[] =>
+  registeredColumns.value.map((reg, i) => {
+    const p = reg.props
+    const fixed = p.fixed === true ? ('left' as const) : p.fixed || undefined
+    return {
+      label: p.label || p.title || '',
+      title: p.title,
+      prop: p.prop,
+      field: p.field,
+      width: p.width,
+      minWidth: p.minWidth,
+      maxWidth: p.maxWidth,
+      fixed,
+      sortable: p.sortable,
+      filterable: p.filterable,
+      align: p.align || props.align || 'left',
+      headerAlign: p.headerAlign || props.headerAlign,
+      footerAlign: p.footerAlign || props.footerAlign,
+      editor: p.editor,
+      editorProps: p.editorProps,
+      options: p.options,
+      formatter: p.formatter,
+      editable: p.editable,
+      filters: p.filters,
+      filterMethod: p.filterMethod,
+      type: p.type,
+      treeNode: p.treeNode,
+      dragSort: p.dragSort,
+      showOverflowTooltip: p.showOverflowTooltip,
+      className: p.className,
+      headerClassName: p.headerClassName || p.labelClassName,
+      children: p.children,
+      aggFunc: p.aggFunc,
+      _key: p.columnKey || p.prop || p.field || `slot-col-${i}`,
+      _defaultSlot: reg.slots.default,
+      _headerSlot: reg.slots.header,
+    }
+  })
+)
+
+const mergedSourceColumns = computed((): QiuTableColumnConfig[] => {
+  const fromSlots = slotColumnsNormalized.value.filter(
+    (c) => c.type !== 'selection' && c.type !== 'index' && c.type !== 'seq'
+  )
+  return [...configColumns.value, ...fromSlots]
+})
+
+const allLeafColumns = computed((): LeafColumn[] => {
+  const leaves = flattenLeafColumns(mergedSourceColumns.value)
+  return leaves.filter(
+    (c) =>
+      c.type !== 'selection' &&
+      c.type !== 'checkbox' &&
+      c.type !== 'index' &&
+      c.type !== 'seq' &&
+      c.type !== 'radio' &&
+      c.type !== 'expand'
+  )
+})
+
+const leafColumns = computed((): LeafColumn[] => {
+  const order = columnOrderKeys.value
+  let leaves = allLeafColumns.value.filter((c) => {
+    if (c.visible === false) return false
+    if (columnVisibleMap[c._key] === false) return false
+    return true
+  })
+  if (order.length) {
+    const map = new Map(leaves.map((c) => [c._key, c]))
+    const ordered: LeafColumn[] = []
+    order.forEach((k) => {
+      const col = map.get(k)
+      if (col) {
+        ordered.push(col)
+        map.delete(k)
+      }
+    })
+    map.forEach((c) => ordered.push(c))
+    leaves = ordered
+  }
+  return leaves
+})
+
+watch(
+  allLeafColumns,
+  (cols) => {
+    const keys = cols.map((c) => c._key)
+    if (!columnOrderKeys.value.length) {
+      columnOrderKeys.value = keys
+      return
+    }
+    const set = new Set(columnOrderKeys.value)
+    keys.forEach((k) => {
+      if (!set.has(k)) columnOrderKeys.value.push(k)
+    })
+    columnOrderKeys.value = columnOrderKeys.value.filter((k) => keys.includes(k))
+  },
+  { immediate: true }
+)
+
+const customizableColumns = computed(() =>
+  allLeafColumns.value.filter((c) => {
+    if (props.customConfig?.checkMethod) return props.customConfig.checkMethod(c)
+    return true
+  })
+)
+
+const customEnabled = computed(() => props.customConfig?.enabled === true)
+
+const resolvedToolbarConfig = computed((): Required<QiuTableToolbarConfig> => {
+  if (props.toolbarConfig === false) {
+    return {
+      enabled: false,
+      refresh: false,
+      export: false,
+      import: false,
+      print: false,
+      custom: false,
+      zoom: false,
+      copy: false,
+      toolsPlacement: 'right',
+      customTools: [],
+    }
+  }
+  const cfg = (props.toolbarConfig && typeof props.toolbarConfig === 'object'
+    ? props.toolbarConfig
+    : {}) as QiuTableToolbarConfig
+  return {
+    enabled: cfg.enabled !== false,
+    refresh: cfg.refresh !== false,
+    export: cfg.export !== false,
+    import: cfg.import !== false,
+    print: cfg.print !== false,
+    custom: cfg.custom !== false,
+    zoom: cfg.zoom !== false,
+    copy: cfg.copy === true,
+    toolsPlacement: cfg.toolsPlacement || 'right',
+    customTools: cfg.customTools || [],
+  }
+})
+
+const slots = useSlots()
+const refreshEnabled = computed(() => resolvedToolbarConfig.value.refresh && props.showRefresh !== false)
+const exportEnabled = computed(() => resolvedToolbarConfig.value.export && props.showExport !== false)
+const importEnabled = computed(() => resolvedToolbarConfig.value.import && props.showImport === true)
+const printEnabled = computed(() => resolvedToolbarConfig.value.print && props.showPrint === true)
+const zoomEnabled = computed(() => resolvedToolbarConfig.value.zoom && props.showFullscreen !== false)
+const copyEnabled = computed(
+  () => resolvedToolbarConfig.value.copy || (props.showCopy === true && props.toolbarConfig !== false)
+)
+const hasToolbarCustom = computed(
+  () =>
+    !!slots.toolbar ||
+    !!slots['toolbar-left'] ||
+    !!slots['toolbar-center'] ||
+    !!slots['toolbar-right'] ||
+    resolvedToolbarConfig.value.customTools.length > 0
+)
+const hasAnyToolbarContent = computed(
+  () =>
+    refreshEnabled.value ||
+    exportEnabled.value ||
+    importEnabled.value ||
+    printEnabled.value ||
+    copyEnabled.value ||
+    zoomEnabled.value ||
+    customEnabled.value ||
+    hasToolbarCustom.value
+)
+const showToolbarArea = computed(
+  () => props.showToolbar !== false && (props.showToolbar === true || hasAnyToolbarContent.value)
+)
+const toolsPlacement = computed(() => resolvedToolbarConfig.value.toolsPlacement)
+
+const customToolsByPosition = (position: 'left' | 'center' | 'right') =>
+  resolvedToolbarConfig.value.customTools
+    .filter((t) => (t.position || 'right') === position)
+    .sort((a, b) => (a.order || 0) - (b.order || 0))
+
+const toggleColumnVisible = (key: string, visible: boolean) => {
+  columnVisibleMap[key] = visible
+}
+
+const columnDragEnabled = computed(() => props.columnDragConfig?.enabled === true)
+
+let colSortableInst: Sortable | null = null
+const initColumnSortable = () => {
+  colSortableInst?.destroy()
+  colSortableInst = null
+  if (!columnDragEnabled.value) return
+  nextTick(() => {
+    const row = headerWrapRef.value?.querySelector('thead tr:last-child') as HTMLElement | null
+    if (!row) return
+    colSortableInst = Sortable.create(row, {
+      draggable: 'th.qiu-table__cell--col-drag',
+      animation: 150,
+      onEnd: (evt) => {
+        const keys = Array.from(row.querySelectorAll('th[data-col-key]'))
+          .map((el) => el.getAttribute('data-col-key') || '')
+          .filter(Boolean)
+        if (keys.length) {
+          columnOrderKeys.value = keys
+          emit('column-dragend', {
+            oldIndex: evt.oldIndex ?? 0,
+            newIndex: evt.newIndex ?? 0,
+            columnKeys: keys,
+          })
+        }
+      },
+    })
+  })
+}
+
+watch(
+  () => [columnDragEnabled.value, leafColumns.value.map((c) => c._key).join(',')],
+  () => initColumnSortable()
+)
+
+const resolvedShowRadio = computed(
+  () =>
+    props.showRadio || mergedSourceColumns.value.some((c) => c.type === 'radio')
+)
+
+const resolvedShowExpand = computed(
+  () =>
+    props.showExpand || mergedSourceColumns.value.some((c) => c.type === 'expand')
+)
+
+const fixedLeftOffset = ( whichtype: 'radio' | 'selection' | 'index') => {
+  let left = 0
+  if (resolvedShowExpand.value) left += 48
+  if (whichtype === 'radio') return left
+  if (resolvedShowRadio.value) left += 48
+  if (whichtype === 'selection') return left
+  if (resolvedShowSelection.value) left += 48
+  return left
+}
+
+const hasFixedLeftDataCol = computed(() =>
+  leafColumns.value.some((c) => c.fixed === 'left' || c.fixed === true)
+)
+
+/** 无数据左固定列时，特殊列最后一列需要阴影 */
+const lastSpecialLeftKind = computed(() => {
+  if (hasFixedLeftDataCol.value) return null
+  if (resolvedShowIndex.value) return 'index'
+  if (resolvedShowSelection.value) return 'selection'
+  if (resolvedShowRadio.value) return 'radio'
+  if (resolvedShowExpand.value) return 'expand'
+  return null
+})
+
+const specialLeftLastClass = (kind: 'expand' | 'radio' | 'selection' | 'index') => ({
+  'qiu-table__cell--fixed-left-last': lastSpecialLeftKind.value === kind,
+})
+
+const headerSourceColumns = computed(() => {
+  const visibleKeys = new Set(leafColumns.value.map((c) => c._key))
+  const walk = (cols: QiuTableColumnConfig[], prefix = ''): QiuTableColumnConfig[] => {
+    const out: QiuTableColumnConfig[] = []
+    cols.forEach((col, i) => {
+      if (
+        col.type === 'selection' ||
+        col.type === 'checkbox' ||
+        col.type === 'index' ||
+        col.type === 'seq'
+      ) {
+        return
+      }
+      const key = makeColumnKey(col, i, prefix)
+      if (col.children?.length) {
+        const children = walk(col.children, key)
+        if (children.length) out.push({ ...col, children })
+        return
+      }
+      if (visibleKeys.has(key)) out.push(col)
+    })
+    return out
+  }
+  return walk(mergedSourceColumns.value)
+})
+
+const headerRows = computed(() => {
+  if (virtualXEnabled.value) {
+    return [
+      displayLeafColumns.value.map((col, i) => ({
+        column: col,
+        label: col.label || '',
+        colspan: 1,
+        rowspan: 1,
+        isLeaf: true,
+        colIndex: i,
+      })),
+    ]
+  }
+  const rows = buildHeaderRows(headerSourceColumns.value)
+  const base = rows.length ? rows : [[]]
+  return applyMergeHeaderCells(base, props.mergeHeaderCells)
+})
+
+const resolvedShowSelection = computed(
+  () =>
+    props.showSelection ||
+    mergedSourceColumns.value.some((c) => c.type === 'selection' || c.type === 'checkbox')
+)
+
+const resolvedShowIndex = computed(
+  () =>
+    props.showIndex ||
+    mergedSourceColumns.value.some((c) => c.type === 'index' || c.type === 'seq')
+)
+
+const renderWidthMap = computed(() => {
+  void layoutTick.value
+  for (const k of Object.keys(columnWidths)) void columnWidths[k]
+  const containerWidth = bodyWrapRef.value?.clientWidth || 0
+  return computeRenderWidths(leafColumns.value, {
+    containerWidth,
+    showSelection: resolvedShowSelection.value,
+    showIndex: resolvedShowIndex.value,
+    showRadio: resolvedShowRadio.value,
+    showExpand: resolvedShowExpand.value,
+    fit: props.fit !== false,
+    resized: columnWidths,
+    defaults: columnWidthDefaults.value,
+  })
+})
+
+const tableMinWidthStyle = computed(() => {
+  // 依赖拖拽列宽与布局 tick，保证三张表总宽始终一致
+  void layoutTick.value
+  for (const k of Object.keys(columnWidths)) void columnWidths[k]
+  const total = Math.max(
+    1,
+    computeTableMinWidth(
+      leafColumns.value,
+      {
+        showSelection: resolvedShowSelection.value,
+        showIndex: resolvedShowIndex.value,
+        showRadio: resolvedShowRadio.value,
+        showExpand: resolvedShowExpand.value,
+      },
+      (col) => renderWidthMap.value[col._key] || getWidth(col._key),
+      columnWidthDefaults.value
+    )
+  )
+  // 100% 铺满窄容器；minWidth 保证列宽之和，超出时由 body-wrap 横向滚动
+  return {
+    width: '100%',
+    minWidth: `${total}px`,
+  }
+})
+
+const rootSizeStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.height != null) {
+    style.height = normalizeSize(props.height)
+    style.minHeight = '0'
+  }
+  if (props.maxHeight != null) {
+    style.maxHeight = normalizeSize(props.maxHeight)
+    style.minHeight = '0'
+  }
+  if (props.minHeight != null) {
+    style.minHeight = normalizeSize(props.minHeight)
+  }
+  if (props.rowConfig?.height != null) {
+    style['--qiu-table-row-height'] = `${props.rowConfig.height}px`
+  }
+  return style
+})
+
+/** 含纵向滚动条占位，供表头/表尾补齐右侧竖线 */
+const rootTableStyle = computed(() => ({
+  ...rootSizeStyle.value,
+  '--qiu-table-v-scrollbar': `${scrollbarSize.value}px`,
+}))
+
+/** main 在固定高度模式下吃掉剩余空间，自身不再写死 height，避免和 toolbar/pager 叠高 */
+const mainStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.rowConfig?.height != null) {
+    style['--qiu-table-row-height'] = `${props.rowConfig.height}px`
+  }
+  return style
+})
+
+const virtualXEnabled = computed(() => {
+  const c = props.virtualXConfig
+  if (c === true) return true
+  if (c && typeof c === 'object') return c.enabled !== false
+  return false
+})
+
+const colWidthOf = (col: LeafColumn) =>
+  renderWidthMap.value[col._key] ||
+  getWidth(col._key) ||
+  parseWidth(col.width) ||
+  parseWidth(col.minWidth) ||
+  columnWidthDefaults.value.minWidth ||
+  100
+
+const virtualXPad = computed(() => {
+  void layoutTick.value
+  if (!virtualXEnabled.value) return { left: 0, right: 0, start: 0, end: leafColumns.value.length }
+  const cols = leafColumns.value
+  const viewW = bodyWrapRef.value?.clientWidth || 800
+  let acc = 0
+  let start = 0
+  const x = Math.max(0, scrollLeftX.value)
+  for (let i = 0; i < cols.length; i++) {
+    const w = colWidthOf(cols[i])
+    if (acc + w >= x - 120) {
+      start = i
+      break
+    }
+    acc += w
+    start = i + 1
+  }
+  let end = start
+  let used = 0
+  for (let i = start; i < cols.length; i++) {
+    used += colWidthOf(cols[i])
+    end = i + 1
+    if (used > viewW + 240) break
+  }
+  let left = 0
+  for (let i = 0; i < start; i++) left += colWidthOf(cols[i])
+  let right = 0
+  for (let i = end; i < cols.length; i++) right += colWidthOf(cols[i])
+  return { left, right, start, end }
+})
+
+const displayLeafColumns = computed(() => {
+  if (!virtualXEnabled.value) return leafColumns.value
+  return leafColumns.value.slice(virtualXPad.value.start, virtualXPad.value.end)
+})
+
+const realColIndex = (col: LeafColumn) => leafColumns.value.findIndex((c) => c._key === col._key)
+
+const totalColspan = computed(() => {
+  let n = displayLeafColumns.value.length
+  if (resolvedShowExpand.value) n += 1
+  if (resolvedShowRadio.value) n += 1
+  if (resolvedShowSelection.value) n += 1
+  if (resolvedShowIndex.value) n += 1
+  if (virtualXEnabled.value && virtualXPad.value.left > 0) n += 1
+  if (virtualXEnabled.value && virtualXPad.value.right > 0) n += 1
+  return Math.max(n, 1)
+})
+
+const pagerEnabled = computed(() => {
+  if (props.pagerConfig === true) return true
+  if (props.pagerConfig && typeof props.pagerConfig === 'object') {
+    return props.pagerConfig.enabled !== false
+  }
+  return false
+})
+
+const pagerConfig = computed(() =>
+  typeof props.pagerConfig === 'object' ? props.pagerConfig : undefined
+)
+
+watch(
+  () => pagerConfig.value,
+  (cfg) => {
+    if (cfg?.currentPage) innerPage.value = cfg.currentPage
+    if (cfg?.pageSize) innerPageSize.value = cfg.pageSize
+  },
+  { immediate: true }
+)
+
+const dragEnabled = computed(
+  () =>
+    props.dragSort ||
+    !!props.gridOptions?.rowConfig?.drag ||
+    leafColumns.value.some((c) => c.dragSort)
+)
+
+const getChildren = (row: any) => row?.[resolvedTreeProps.value.children] || []
+const hasRowChildren = (row: any) => {
+  const children = getChildren(row)
+  if (children.length) return true
+  return !!row?.[resolvedTreeProps.value.hasChildren]
+}
+
+const walkRows = (rows: any[], fn: (row: any) => void) => {
+  const childrenKey = resolvedTreeProps.value.children
+  for (const row of rows || []) {
+    fn(row)
+    if (row?.[childrenKey]?.length) walkRows(row[childrenKey], fn)
+  }
+}
+
+const initExpandState = () => {
+  if (!props.tree) return
+  const next = new Set<string>()
+  if (props.defaultExpandAll) {
+    walkRows(props.data, (row) => {
+      if (hasRowChildren(row)) next.add(getRowId(row))
+    })
+  }
+  expandedKeys.value = next
+  expandInitialized = true
+}
+
+const isExpanded = (row: any) => expandedKeys.value.has(getRowId(row))
+const toggleExpand = (row: any) => {
+  const id = getRowId(row)
+  const next = new Set(expandedKeys.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expandedKeys.value = next
+}
+
+const flattenRows = (rows: any[], level = 0, acc: QiuTableFlatRow[] = []): QiuTableFlatRow[] => {
+  for (const row of rows || []) {
+    const hasChildren = hasRowChildren(row)
+    const expanded = isExpanded(row)
+    acc.push({ row, level, hasChildren, expanded, flatIndex: acc.length })
+    if (hasChildren && expanded) flattenRows(getChildren(row), level + 1, acc)
+  }
+  return acc
+}
+
+const rawFlatRows = computed(() => {
+  if (props.tree) return flattenRows(props.data)
+  return (props.data || []).map((row, i) => ({
+    row,
+    level: 0,
+    hasChildren: false,
+    expanded: false,
+    flatIndex: i,
+  }))
+})
+
+const formatCell = (row: any, col: QiuTableColumnConfig) => {
+  const prop = resolveColumnProp(col)
+  const value = prop != null ? row?.[prop] : undefined
+  if (col.formatter) return String(col.formatter(row, col, value) ?? '')
+  if (col.format && QiuTableFormats.has(col.format)) {
+    return QiuTableFormats.get(col.format)!({ cellValue: value, row, column: col })
+  }
+  const er = getEditRender(col)
+  const options = er?.options || col.options
+  const editor = er?.name || getColEditor(col)
+  if (editor === 'select' && options?.length) {
+    const hit = options.find((o) => o.value === value)
+    return String(hit?.label ?? value ?? '')
+  }
+  if (value == null) return ''
+  return String(value)
+}
+
+const isFilterable = (col: LeafColumn) => !!col.filterable || !!(col.filters && col.filters.length)
+
+const getFilterOptions = (col: LeafColumn): FilterOption[] => {
+  if (col.filters?.length) return col.filters
+  const prop = getProp(col)
+  if (!prop || !col.filterable) return []
+  const seen = new Set<string>()
+  const opts: FilterOption[] = []
+  for (const { row } of rawFlatRows.value) {
+    const v = row?.[prop]
+    const key = String(v)
+    if (seen.has(key)) continue
+    seen.add(key)
+    opts.push({ text: formatCell(row, col) || key, value: v })
+  }
+  return opts
+}
+
+const isFilterActive = (col: LeafColumn) => (filterValues[col._key]?.length ?? 0) > 0
+
+const openFilterOptions = computed(() => {
+  const key = openFilterKey.value
+  if (!key) return [] as FilterOption[]
+  const col = leafColumns.value.find((c) => c._key === key)
+  return col ? getFilterOptions(col) : []
+})
+
+const applyFilters = (rows: QiuTableFlatRow[]) => {
+  if (props.filterConfig?.remote) return rows
+  const active = leafColumns.value.filter((c) => (filterValues[c._key]?.length ?? 0) > 0)
+  if (!active.length) return rows
+  return rows.filter(({ row }) =>
+    active.every((col) => {
+      const vals = filterValues[col._key] || []
+      if (col.filterMethod) return vals.some((v) => col.filterMethod!(v, row, col))
+      const prop = getProp(col)
+      if (!prop) return true
+      return vals.some((v) => row[prop] === v)
+    })
+  )
+}
+
+const applySort = (rows: QiuTableFlatRow[]) => {
+  if (props.sortConfig?.remote) return rows
+  const sorts =
+    props.sortConfig?.multiple && sortList.value.length
+      ? sortList.value
+      : sortState.value.prop && sortState.value.order
+        ? [{ prop: sortState.value.prop, order: sortState.value.order }]
+        : []
+  if (!sorts.length) return rows
+  const sorted = [...rows]
+  sorted.sort((a, b) => compareRows(a.row, b.row, sorts))
+  return sorted.map((r, i) => ({ ...r, flatIndex: i }))
+}
+
+const visibleRows = computed(() => applySort(applyFilters(rawFlatRows.value)))
+
+const pagerTotal = computed(() => pagerConfig.value?.total ?? visibleRows.value.length)
+
+const pageCount = computed(() => Math.max(1, Math.ceil(pagerTotal.value / innerPageSize.value)))
+
+const pagedRows = computed(() => {
+  if (!pagerEnabled.value) return visibleRows.value
+  if (pagerConfig.value?.total != null) {
+    return visibleRows.value.map((r, i) => ({ ...r, flatIndex: i }))
+  }
+  const start = (innerPage.value - 1) * innerPageSize.value
+  return visibleRows.value
+    .slice(start, start + innerPageSize.value)
+    .map((r, i) => ({ ...r, flatIndex: start + i }))
+})
+
+const virtualConfig = computed(() => {
+  if (props.virtualYConfig != null) return props.virtualYConfig
+  if (props.virtualY) return true
+  return false
+})
+
+const {
+  enabled: virtualEnabled,
+  range: virtualRange,
+  onScroll: onVirtualScroll,
+  measure: measureVirtual,
+} = useVirtualY({
+  bodyWrapRef,
+  rows: () => pagedRows.value,
+  config: () => virtualConfig.value,
+  defaultRowHeight: props.rowConfig?.height || 48,
+})
+
+const displayRowItems = computed(() => {
+  const rows = pagedRows.value
+  if (!virtualEnabled.value) {
+    return rows.map((flat, rowIndex) => ({ flat, rowIndex }))
+  }
+  const { start, end } = virtualRange.value
+  return rows.slice(start, end).map((flat, i) => ({
+    flat,
+    rowIndex: start + i,
+  }))
+})
+
+const onBodyScroll = () => {
+  syncFromBody()
+  onVirtualScroll()
+  scrollLeftX.value = bodyWrapRef.value?.scrollLeft || 0
+  updateHasScrollX()
+}
+
+const buildDefaultFooter = (): string[][] => {
+  // 必须用当前页数据：翻页后合计/平均应随之变化
+  const data = pagedRows.value.map((f) => f.row)
+  const sumRow: string[] = []
+  const avgRow: string[] = []
+
+  leafColumns.value.forEach((col, i) => {
+    const prop = getProp(col)
+    if (i === 0) {
+      sumRow.push(translate('合计'))
+      avgRow.push(translate('平均'))
+      return
+    }
+
+    const nums = data
+      .map((r) => Number(prop != null ? r[prop] : NaN))
+      .filter((n) => !Number.isNaN(n))
+
+    const fmtMoney = (n: number) =>
+      `¥ ${n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+
+    if (col.aggFunc === 'count') {
+      sumRow.push(String(data.length))
+      avgRow.push('')
+      return
+    }
+
+    if (col.aggFunc === 'sum' || col.aggFunc === 'avg' || (nums.length > 0 && nums.length === data.length)) {
+      const s = nums.reduce((a, b) => a + b, 0)
+      const avg = nums.length ? s / nums.length : 0
+      const useMoney = col.aggFunc != null || prop === 'jan' || prop === 'feb'
+      if (col.aggFunc === 'avg') {
+        sumRow.push('')
+        avgRow.push(useMoney ? fmtMoney(avg) : avg.toFixed(2))
+        return
+      }
+      sumRow.push(useMoney ? fmtMoney(s) : String(Number.isInteger(s) ? s : Number(s.toFixed(2))))
+      avgRow.push(useMoney ? fmtMoney(avg) : avg.toFixed(2))
+      return
+    }
+
+    sumRow.push('')
+    avgRow.push('')
+  })
+
+  return [sumRow, avgRow]
+}
+
+const footerRows = computed(() => {
+  if (!props.showFooter) return [] as string[][]
+  if (props.footerData?.length) return props.footerData
+  const pageData = pagedRows.value.map((f) => f.row)
+  if (props.footerMethod) {
+    return props.footerMethod({
+      columns: leafColumns.value,
+      data: pageData,
+    })
+  }
+  return buildDefaultFooter()
+})
+
+const mapSlotScope = (row: any, col: QiuTableColumnConfig, index: number, level = 0) => ({
+  row,
+  column: col,
+  $index: index,
+  cellValue: getProp(col) != null ? row?.[getProp(col)!] : undefined,
+  level,
+})
+
+const editorSize = computed(() => props.size || 'small')
+
+const toDateInputValue = (val: any, datetime: boolean) => {
+  if (!val) return ''
+  const s = String(val)
+  if (datetime) return s.replace(' ', 'T').slice(0, 16)
+  return s.slice(0, 10)
+}
+
+const renderEditor = (row: any, col: LeafColumn) => {
+  const prop = getProp(col)!
+  const val = row[prop]
+  const onDone = (v: any) => commitEdit(row, col, v)
+  const scheduleBlurCommit = (v: any) => {
+    // 延后到下一帧，避开挂载/聚焦瞬间的伪 blur，以及下拉面板抢焦点
+    requestAnimationFrame(() => {
+      if (inEditGuard()) return
+      if (!isEditing(row, col)) return
+      onDone(v)
+    })
+  }
+  const editRender = getEditRender(col) || resolveEditRender(col)
+  const editor = editRender?.name || getColEditor(col)
+  const editorProps = {
+    ...(col.editorProps || {}),
+    ...(editRender?.props || {}),
+    ...(editRender?.attrs || {}),
+  }
+  const editorOptions = editRender?.options || col.options || []
+  const bindEvents = (base: Record<string, any>) => {
+    const ev = editRender?.events
+    if (!ev) return base
+    const next = { ...base }
+    Object.keys(ev).forEach((k) => {
+      const userFn = ev[k]
+      const prev = next[k]
+      next[k] = (...args: any[]) => {
+        userFn?.(...args)
+        if (typeof prev === 'function') prev(...args)
+      }
+    })
+    return next
+  }
+  const fill = editor === 'input'
+
+  // 自定义 editRender
+  if (editor && QiuTableEditRenderer.has(editor)) {
+    const vnode = QiuTableEditRenderer.get(editor)!({
+      cellValue: val,
+      row,
+      column: col,
+      editRender: editRender!,
+      commit: onDone,
+      update: (v) => {
+        row[prop] = v
+      },
+    })
+    if (vnode) return vnode
+  }
+
+  if (editor === 'switch') {
+    return h(
+      QiuSwitch,
+      bindEvents({
+        modelValue: !!val,
+        size: editorSize.value === 'large' ? 'default' : 'small',
+        ...editorProps,
+        'onUpdate:modelValue': onDone,
+        onChange: onDone,
+      })
+    )
+  }
+  if (editor === 'select') {
+    return h(
+      QiuSelect,
+      bindEvents({
+        modelValue: val,
+        options: editorOptions,
+        size: editorSize.value,
+        fit: true,
+        ...editorProps,
+        'onUpdate:modelValue': (v: any) => {
+          row[prop] = v
+        },
+        onChange: onDone,
+        onVisibleChange: (open: boolean) => {
+          if (!open) onDone(row[prop])
+        },
+      })
+    )
+  }
+  if (editor === 'number') {
+    return h(
+      QiuInputNumber,
+      bindEvents({
+        modelValue: val,
+        size: editorSize.value,
+        controlsPosition: 'right',
+        style: { width: '110px', maxWidth: '100%' },
+        ...editorProps,
+        'onUpdate:modelValue': (v: number | null) => {
+          row[prop] = v
+        },
+        onChange: onDone,
+        onBlur: () => scheduleBlurCommit(row[prop]),
+      })
+    )
+  }
+  if (editor === 'date' || editor === 'datetime') {
+    return h(
+      'input',
+      bindEvents({
+        class: 'qiu-table__date-input',
+        type: editor === 'datetime' ? 'datetime-local' : 'date',
+        value: toDateInputValue(val, editor === 'datetime'),
+        ...editorProps,
+        onChange: (e: Event) => onDone((e.target as HTMLInputElement).value),
+        onKeydown: (e: KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            e.stopPropagation()
+            onDone((e.target as HTMLInputElement).value)
+          }
+        },
+        onBlur: (e: FocusEvent) => scheduleBlurCommit((e.target as HTMLInputElement).value),
+      })
+    )
+  }
+  if (editor === 'time') {
+    return h(
+      QiuTime,
+      bindEvents({
+        modelValue: val ?? null,
+        size: editorSize.value,
+        fit: true,
+        format: (editorProps as any)?.format || 'HH:mm:ss',
+        ...editorProps,
+        'onUpdate:modelValue': (v: string | null) => {
+          row[prop] = v
+        },
+        onChange: onDone,
+        onVisibleChange: (open: boolean) => {
+          if (!open && row[prop] != null) onDone(row[prop])
+        },
+      })
+    )
+  }
+  return h(
+    QiuInput,
+    bindEvents({
+      modelValue: val ?? '',
+      size: fill ? undefined : editorSize.value,
+      class: fill ? 'qiu-table__input-fill' : undefined,
+      style: fill
+        ? { width: '100%', height: '100%', borderRadius: '0' }
+        : { width: '100%' },
+      ...editorProps,
+      'onUpdate:modelValue': (v: string | number) => {
+        row[prop] = v
+      },
+      onKeydown: (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          e.stopPropagation()
+          onDone(row[prop])
+        } else if (e.key === 'Escape') {
+          e.preventDefault()
+          e.stopPropagation()
+          clearEdit()
+        }
+      },
+      onBlur: () => scheduleBlurCommit(row[prop]),
+    })
+  )
+}
+
+const onCellClick = (row: any, col: QiuTableColumnConfig, e?: MouseEvent) => {
+  setActive(row, col, !!e?.shiftKey)
+  onRowClick(row)
+  if (!props.editable) return
+  const trigger = getTrigger()
+  if (trigger === 'click') startEdit(row, col, bodyWrapRef.value)
+}
+
+const onCellDblclick = (row: any, col: QiuTableColumnConfig) => {
+  setActive(row, col)
+  if (!props.editable) return
+  const trigger = getTrigger()
+  if (trigger === 'dblclick') startEdit(row, col, bodyWrapRef.value)
+}
+
+const isRowSelected = (row: any) =>
+  selectionRows.value.some((r) => getRowId(r) === getRowId(row))
+
+const toggleRowSelection = (row: any, checked: boolean) => {
+  const id = getRowId(row)
+  let next = selectionRows.value.slice()
+  if (checked) {
+    if (!next.some((r) => getRowId(r) === id)) next.push(row)
+  } else next = next.filter((r) => getRowId(r) !== id)
+  selectionRows.value = next
+  emit('selection-change', next)
+  emit('checkbox-change', { records: next, row, checked })
+}
+
+const isAllSelected = computed(() => {
+  const rows = pagedRows.value.map((f) => f.row)
+  return rows.length > 0 && rows.every((r) => isRowSelected(r))
+})
+
+const isIndeterminate = computed(() => {
+  const rows = pagedRows.value.map((f) => f.row)
+  const count = rows.filter((r) => isRowSelected(r)).length
+  return count > 0 && count < rows.length
+})
+
+const toggleSelectAll = (checked: boolean) => {
+  const rows = pagedRows.value.map((f) => f.row)
+  selectionRows.value = checked ? rows.slice() : []
+  emit('selection-change', selectionRows.value)
+  emit('checkbox-all', { records: selectionRows.value, checked })
+}
+
+const onHeaderClick = (col: LeafColumn, e?: MouseEvent) => {
+  if (!col.sortable || col.sortable === 'custom') return
+  const prop = getProp(col)
+  if (!prop) return
+  const multi = !!props.sortConfig?.multiple && !!(e?.shiftKey || e?.ctrlKey || e?.metaKey)
+
+  if (multi) {
+    const idx = sortList.value.findIndex((s) => s.prop === prop)
+    if (idx < 0) sortList.value = [...sortList.value, { prop, order: 'asc' }]
+    else if (sortList.value[idx].order === 'asc') {
+      const next = sortList.value.slice()
+      next[idx] = { prop, order: 'desc' }
+      sortList.value = next
+    } else {
+      sortList.value = sortList.value.filter((s) => s.prop !== prop)
+    }
+    const last = sortList.value[sortList.value.length - 1]
+    sortState.value = last
+      ? { prop: last.prop, order: last.order }
+      : { prop: '', order: null }
+    emit('sort-change', {
+      prop: sortState.value.prop,
+      order: sortState.value.order,
+      sorts: sortList.value.slice(),
+    } as any)
+    return
+  }
+
+  sortList.value = []
+  if (sortState.value.prop !== prop) sortState.value = { prop, order: 'asc' }
+  else if (sortState.value.order === 'asc') sortState.value = { prop, order: 'desc' }
+  else sortState.value = { prop: '', order: null }
+  if (sortState.value.prop && sortState.value.order) {
+    sortList.value = [{ prop: sortState.value.prop, order: sortState.value.order }]
+  }
+  emit('sort-change', { ...sortState.value, sorts: sortList.value.slice() } as any)
+}
+
+const sortPriority = (col: LeafColumn) => {
+  if (!props.sortConfig?.multiple || sortList.value.length < 2) return 0
+  const prop = getProp(col)
+  const idx = sortList.value.findIndex((s) => s.prop === prop)
+  return idx >= 0 ? idx + 1 : 0
+}
+
+const sortClass = (col: LeafColumn) => {
+  const prop = getProp(col)
+  if (props.sortConfig?.multiple && sortList.value.length) {
+    const hit = sortList.value.find((s) => s.prop === prop)
+    if (!hit) return ''
+    return hit.order === 'asc' ? 'is-asc' : 'is-desc'
+  }
+  if (sortState.value.prop !== prop) return ''
+  return sortState.value.order === 'asc' ? 'is-asc' : 'is-desc'
+}
+
+const onRowClick = (row: any) => {
+  if (!resolveRowCurrent(props.rowConfig)) return
+  currentRowId.value = getRowId(row)
+  emit('current-change', { row })
+}
+
+const mergeCovered = computed(() => buildMergeCoveredSet(props.mergeCells))
+
+const cellSpan = (
+  flat: QiuTableFlatRow,
+  rowIndex: number,
+  col: LeafColumn,
+  columnIndex: number
+) =>
+  resolveCellSpan({
+    row: flat.row,
+    column: col,
+    rowIndex,
+    columnIndex,
+    data: pagedRows.value.map((f) => f.row),
+    spanMethod: props.spanMethod,
+    mergeCells: props.mergeCells,
+    covered: mergeCovered.value,
+  })
+
+const isColResizable = (col: LeafColumn) => {
+  if (col.resizable === false) return false
+  if (col.resizable === true) return true
+  return !!props.columnConfig?.resizable
+}
+
+const resolvedColStyle = (col: LeafColumn) => {
+  void columnWidths[col._key]
+  const w = colWidthOf(col)
+  const hints = getColumnSizeHints(col, bodyWrapRef.value?.clientWidth || 0, columnWidthDefaults.value)
+  return {
+    width: `${w}px`,
+    minWidth: `${hints.isFlex ? hints.minWidth : w}px`,
+    ...(hints.maxWidth < Number.POSITIVE_INFINITY ? { maxWidth: `${hints.maxWidth}px` } : {}),
+  }
+}
+
+const onColResizeStart = (col: LeafColumn, e: MouseEvent) => {
+  const cur = colWidthOf(col)
+  const hints = getColumnSizeHints(col, bodyWrapRef.value?.clientWidth || 0, columnWidthDefaults.value)
+  onResizeStart(col._key, cur, e, {
+    minWidth: hints.minWidth,
+    maxWidth: hints.maxWidth < Number.POSITIVE_INFINITY ? hints.maxWidth : undefined,
+  })
+  const onUp = () => {
+    emit('resizable-change', {
+      column: col,
+      width: columnWidths[col._key] || cur,
+    })
+    document.removeEventListener('mouseup', onUp)
+  }
+  document.addEventListener('mouseup', onUp)
+}
+
+const toggleFilterPanel = (col: LeafColumn, e: MouseEvent) => {
+  if (openFilterKey.value === col._key) {
+    closeFilterPanel()
+    return
+  }
+  filterDraft[col._key] = [...(filterValues[col._key] || [])]
+  openFilterKey.value = col._key
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  filterPanelPos.value = {
+    left: Math.min(rect.left, window.innerWidth - 220),
+    top: rect.bottom + 6,
+  }
+}
+
+const closeFilterPanel = () => {
+  openFilterKey.value = null
+  filterPanelPos.value = null
+}
+
+const isFilterOptionChecked = (key: string, value: any) =>
+  (filterDraft[key] || []).some((v) => v === value)
+
+const toggleFilterOption = (key: string, value: any, checked: boolean) => {
+  const cur = [...(filterDraft[key] || [])]
+  const idx = cur.findIndex((v) => v === value)
+  if (checked && idx < 0) cur.push(value)
+  if (!checked && idx >= 0) cur.splice(idx, 1)
+  filterDraft[key] = cur
+}
+
+const isFilterAllChecked = computed(() => {
+  const key = openFilterKey.value
+  if (!key || !openFilterOptions.value.length) return false
+  return openFilterOptions.value.every((opt) => isFilterOptionChecked(key, opt.value))
+})
+
+const isFilterIndeterminate = computed(() => {
+  const key = openFilterKey.value
+  if (!key || !openFilterOptions.value.length) return false
+  const n = (filterDraft[key] || []).length
+  return n > 0 && n < openFilterOptions.value.length
+})
+
+const toggleFilterAll = (checked: boolean) => {
+  const key = openFilterKey.value
+  if (!key) return
+  filterDraft[key] = checked ? openFilterOptions.value.map((o) => o.value) : []
+}
+
+const confirmFilter = () => {
+  const key = openFilterKey.value
+  if (key) {
+    filterValues[key] = [...(filterDraft[key] || [])]
+    emit('filter-change', { ...filterValues })
+  }
+  closeFilterPanel()
+}
+
+const resetOpenFilter = () => {
+  const key = openFilterKey.value
+  if (key) {
+    filterDraft[key] = []
+    filterValues[key] = []
+    emit('filter-change', { ...filterValues })
+  }
+  closeFilterPanel()
+}
+
+const headerCellStyle = (cell: { column: LeafColumn; isLeaf: boolean }) => {
+  const col = cell.column
+  // 分组表头不写 width，避免 colspan 单元格与 colgroup 抢宽度导致错线
+  const style: Record<string, string> = cell.isLeaf ? {} : {}
+  if (!cell.isLeaf) return style
+  if (col.fixed === 'left' || col.fixed === true) {
+    style.left = `${leftOffsetForColumn(
+      leafColumns.value,
+      col._key,
+      {
+        showSelection: resolvedShowSelection.value,
+        showIndex: resolvedShowIndex.value,
+        showRadio: resolvedShowRadio.value,
+        showExpand: resolvedShowExpand.value,
+      },
+      colWidthOf
+    )}px`
+  }
+  if (col.fixed === 'right') {
+    style.right = `${rightOffsetForColumn(leafColumns.value, col._key, colWidthOf)}px`
+  }
+  return style
+}
+
+const bodyCellStyle = (col?: LeafColumn) => {
+  if (!col) return {}
+  // 列宽只走 colgroup，避免 th/td 与 col 双重指定在缩放后分叉
+  const style: Record<string, string> = {}
+  if (col.fixed === 'left' || col.fixed === true) {
+    style.left = `${leftOffsetForColumn(
+      leafColumns.value,
+      col._key,
+      {
+        showSelection: resolvedShowSelection.value,
+        showIndex: resolvedShowIndex.value,
+        showRadio: resolvedShowRadio.value,
+        showExpand: resolvedShowExpand.value,
+      },
+      colWidthOf
+    )}px`
+  }
+  if (col.fixed === 'right') {
+    style.right = `${rightOffsetForColumn(leafColumns.value, col._key, colWidthOf)}px`
+  }
+  return style
+}
+
+const fixedCellClass = (col?: LeafColumn) => {
+  if (!col) return {}
+  const isLeft = col.fixed === 'left' || col.fixed === true
+  const isRight = col.fixed === 'right'
+  return {
+    'qiu-table__cell--fixed-left': isLeft,
+    'qiu-table__cell--fixed-right': isRight,
+    'qiu-table__cell--fixed-left-last':
+      isLeft && isLastFixedLeft(leafColumns.value, col._key),
+    'qiu-table__cell--fixed-right-first':
+      isRight && isFirstFixedRight(leafColumns.value, col._key),
+  }
+}
+
+const toggleFullscreen = async () => {
+  isFullscreen.value = !isFullscreen.value
+  await nextTick()
+  scheduleLayout()
+}
+
+const onPageChange = (page: number) => {
+  innerPage.value = page
+  emit('page-change', { currentPage: page, pageSize: innerPageSize.value })
+}
+
+const onSizeChange = (size: number) => {
+  innerPageSize.value = size
+  innerPage.value = 1
+  emit('page-change', { currentPage: 1, pageSize: size })
+}
+
+const setAllTreeExpand = (checked: boolean) => {
+  const next = new Set<string>()
+  if (checked) {
+    walkRows(props.data, (row) => {
+      if (hasRowChildren(row)) next.add(getRowId(row))
+    })
+  }
+  expandedKeys.value = next
+}
+
+const getCheckboxRecords = () => selectionRows.value.slice()
+
+const exportableColumns = computed(() =>
+  leafColumns.value.filter((c) => getProp(c) && !c.dragSort && c.type !== 'selection' && c.type !== 'index' && c.type !== 'seq' && c.type !== 'radio' && c.type !== 'expand')
+)
+
+const exportAllChecked = computed(
+  () =>
+    exportableColumns.value.length > 0 &&
+    exportableColumns.value.every((c) => exportFieldKeys.value.includes(c._key))
+)
+
+const exportIndeterminate = computed(() => {
+  const n = exportFieldKeys.value.length
+  return n > 0 && n < exportableColumns.value.length
+})
+
+const openExportDialog = () => {
+  const cfg = props.exportConfig
+  const all = exportableColumns.value.filter((c) =>
+    cfg?.columnFilterMethod ? cfg.columnFilterMethod({ column: c }) !== false : true
+  )
+  exportFieldKeys.value = all.map((c) => c._key)
+  exportFormat.value = (cfg?.type as QiuTableExportFormat) || 'xlsx'
+  exportMode.value = cfg?.mode || 'all'
+  exportStartPage.value = Math.max(1, cfg?.startPage ?? innerPage.value)
+  exportEndPage.value = Math.max(
+    exportStartPage.value,
+    Math.min(pageCount.value, cfg?.endPage ?? pageCount.value)
+  )
+  exportDialogVisible.value = true
+}
+
+const toggleExportAll = (checked: boolean) => {
+  exportFieldKeys.value = checked ? exportableColumns.value.map((c) => c._key) : []
+}
+
+const toggleExportField = (key: string, checked: boolean) => {
+  if (checked) {
+    if (!exportFieldKeys.value.includes(key)) exportFieldKeys.value = [...exportFieldKeys.value, key]
+  } else {
+    exportFieldKeys.value = exportFieldKeys.value.filter((k) => k !== key)
+  }
+}
+
+const collectExportRows = (mode: 'current' | 'all' | 'selected' | 'range') => {
+  if (mode === 'selected') return selectionRows.value.slice()
+  if (mode === 'current') return pagedRows.value.map((f) => f.row)
+  if (mode === 'range') {
+    const start = Math.max(0, (exportStartPage.value - 1) * innerPageSize.value)
+    const end = exportEndPage.value * innerPageSize.value
+    return visibleRows.value.slice(start, end).map((r) => r.row)
+  }
+  const flat: any[] = []
+  walkRows(props.data, (row) => flat.push(row))
+  return flat
+}
+
+const confirmExport = async () => {
+  const cfg = { ...(props.exportConfig || {}) }
+  cfg.type = exportFormat.value
+  if (cfg.beforeExportMethod) {
+    const ok = await cfg.beforeExportMethod({ options: cfg })
+    if (ok === false) return
+  }
+  const cols = exportableColumns.value.filter((c) => exportFieldKeys.value.includes(c._key))
+  if (!cols.length) return
+  cfg.mode = exportMode.value || 'all'
+  cfg.startPage = exportStartPage.value
+  cfg.endPage = exportEndPage.value
+  const rows = collectExportRows(cfg.mode)
+  const matrix = buildSheetMatrix(cols, rows, (row, col) => formatCell(row, col))
+  const base = cfg.filename || 'export'
+  await exportSheet({
+    format: exportFormat.value,
+    filename: base,
+    matrix,
+  })
+  exportDialogVisible.value = false
+  cfg.afterExportMethod?.({ options: cfg })
+}
+
+const exportData = async (opts?: {
+  filename?: string
+  format?: QiuTableExportFormat
+  columns?: string[]
+  mode?: 'current' | 'all' | 'selected' | 'range'
+  startPage?: number
+  endPage?: number
+}) => {
+  const cfg = { ...(props.exportConfig || {}), ...opts }
+  if (cfg.beforeExportMethod) {
+    const ok = await cfg.beforeExportMethod({ options: cfg as QiuTableExportConfig })
+    if (ok === false) return
+  }
+  const all = exportableColumns.value.filter((c) =>
+    cfg.columnFilterMethod ? cfg.columnFilterMethod({ column: c }) !== false : true
+  )
+  const cols = opts?.columns?.length
+    ? all.filter((c) => opts.columns!.includes(c._key) || opts.columns!.includes(getProp(c) || ''))
+    : all
+  if (!cols.length) {
+    openExportDialog()
+    return
+  }
+  const exportModeValue = opts?.mode || cfg.mode || 'all'
+  if (exportModeValue === 'range') {
+    exportStartPage.value = Math.max(1, opts?.startPage ?? cfg.startPage ?? innerPage.value)
+    exportEndPage.value = Math.max(
+      exportStartPage.value,
+      Math.min(pageCount.value, opts?.endPage ?? cfg.endPage ?? pageCount.value)
+    )
+  }
+  const rows = collectExportRows(exportModeValue)
+  const matrix = buildSheetMatrix(cols, rows, (row, col) => formatCell(row, col))
+  await exportSheet({
+    format: (opts?.format || cfg.type || 'xlsx') as QiuTableExportFormat,
+    filename: opts?.filename || cfg.filename || 'export',
+    matrix,
+  })
+  cfg.afterExportMethod?.({ options: cfg as QiuTableExportConfig })
+}
+
+const triggerImport = () => importInputRef.value?.click()
+
+const onImportFile = async (e: Event) => {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  ;(e.target as HTMLInputElement).value = ''
+  if (!file) return
+  try {
+    const rows = await parseImportFile(file)
+    const objects = csvToObjects(rows, leafColumns.value)
+    emit('import-data', { rows: objects })
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+const escapePrintHtml = (s: any) =>
+  String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+
+/** 构建可打印表格：含完整表头；thead 在每页重复 */
+const printTable = () => {
+  const cols = leafColumns.value
+  const dataRows = visibleRows.value
+  const built = buildHeaderRows(headerSourceColumns.value)
+  const headRows = built.filter((r) => r.length)
+  const depth = Math.max(headRows.length, 1)
+
+  const specialTh = (label = '') =>
+    `<th class="qiu-print-special" rowspan="${depth}">${escapePrintHtml(label)}</th>`
+
+  let theadHtml = '<thead>'
+  if (headRows.length) {
+    headRows.forEach((row, ri) => {
+      theadHtml += '<tr>'
+      if (ri === 0) {
+        if (resolvedShowExpand.value) theadHtml += specialTh('')
+        if (resolvedShowRadio.value) theadHtml += specialTh('')
+        if (resolvedShowSelection.value) theadHtml += specialTh('')
+        if (resolvedShowIndex.value) theadHtml += specialTh(translate('序号'))
+      }
+      row.forEach((cell) => {
+        theadHtml += `<th colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">${escapePrintHtml(cell.label)}</th>`
+      })
+      theadHtml += '</tr>'
+    })
+  } else {
+    theadHtml += '<tr>'
+    if (resolvedShowExpand.value) theadHtml += specialTh('')
+    if (resolvedShowRadio.value) theadHtml += specialTh('')
+    if (resolvedShowSelection.value) theadHtml += specialTh('')
+    if (resolvedShowIndex.value) theadHtml += specialTh(translate('序号'))
+    cols.forEach((col) => {
+      theadHtml += `<th>${escapePrintHtml(col.label || '')}</th>`
+    })
+    theadHtml += '</tr>'
+  }
+  theadHtml += '</thead>'
+
+  let tbodyHtml = '<tbody>'
+  dataRows.forEach((item, i) => {
+    tbodyHtml += '<tr>'
+    if (resolvedShowExpand.value) tbodyHtml += '<td></td>'
+    if (resolvedShowRadio.value) tbodyHtml += '<td></td>'
+    if (resolvedShowSelection.value) tbodyHtml += '<td></td>'
+    if (resolvedShowIndex.value) tbodyHtml += `<td>${item.flatIndex + 1}</td>`
+    cols.forEach((col) => {
+      const align = col.align || 'left'
+      tbodyHtml += `<td style="text-align:${align}">${escapePrintHtml(formatCell(item.row, col))}</td>`
+    })
+    tbodyHtml += '</tr>'
+  })
+  tbodyHtml += '</tbody>'
+
+  let tfootHtml = ''
+  if (props.showFooter && footerRows.value.length) {
+    tfootHtml = '<tfoot>'
+    footerRows.value.forEach((frow) => {
+      tfootHtml += '<tr>'
+      if (resolvedShowExpand.value) tfootHtml += '<td></td>'
+      if (resolvedShowRadio.value) tfootHtml += '<td></td>'
+      if (resolvedShowSelection.value) tfootHtml += '<td></td>'
+      if (resolvedShowIndex.value) tfootHtml += '<td></td>'
+      frow.forEach((text, ci) => {
+        const align = cols[ci]?.align || 'left'
+        tfootHtml += `<td style="text-align:${align}">${escapePrintHtml(text)}</td>`
+      })
+      tfootHtml += '</tr>'
+    })
+    tfootHtml += '</tfoot>'
+  }
+
+  const win = window.open('', '_blank')
+  if (!win) return
+  win.document.write(`<!DOCTYPE html><html><head><meta charset="utf-8"/><title>${escapePrintHtml(translate('打印'))}</title>
+<style>
+  @page { margin: 12mm; }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #303133; }
+  table.qiu-print-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+    font-size: 12px;
+  }
+  .qiu-print-table th,
+  .qiu-print-table td {
+    border: 1px solid #dcdfe6;
+    padding: 6px 8px;
+    vertical-align: middle;
+    word-break: break-word;
+  }
+  .qiu-print-table thead {
+    display: table-header-group; /* 每一打印页重复表头 */
+  }
+  .qiu-print-table tfoot {
+    display: table-footer-group;
+  }
+  .qiu-print-table tr {
+    page-break-inside: avoid;
+  }
+  .qiu-print-table th {
+    background: #f5f7fa !important;
+    font-weight: 600;
+    text-align: left;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .qiu-print-table tfoot td {
+    background: #fafafa !important;
+    font-weight: 600;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  @media print {
+    .qiu-print-table thead { display: table-header-group; }
+    .qiu-print-table tfoot { display: table-footer-group; }
+  }
+</style></head><body>
+<table class="qiu-print-table">${theadHtml}${tbodyHtml}${tfootHtml}</table>
+</body></html>`)
+  win.document.close()
+  win.focus()
+  // 等样式/字体就绪再打
+  setTimeout(() => {
+    win.print()
+  }, 50)
+}
+
+const toolButtonList = computed(() => [
+  {
+    name: 'refresh',
+    show: refreshEnabled.value,
+    title: translate('刷新'),
+    icon: 'refresh-line',
+    onClick: () => emit('refresh'),
+  },
+  {
+    name: 'zoom',
+    show: zoomEnabled.value,
+    title: translate(isFullscreen.value ? '退出全屏' : '全屏'),
+    icon: isFullscreen.value ? 'fullscreen-exit-line' : 'fullscreen-line',
+    onClick: toggleFullscreen,
+  },
+  {
+    name: 'import',
+    show: importEnabled.value,
+    title: translate('导入'),
+    icon: 'upload-2-line',
+    onClick: triggerImport,
+  },
+  {
+    name: 'print',
+    show: printEnabled.value,
+    title: translate('打印'),
+    icon: 'printer-line',
+    onClick: printTable,
+  },
+  {
+    name: 'custom',
+    show: customEnabled.value,
+    title: translate('列设置'),
+    icon: 'settings-3-line',
+    onClick: () => (customPanelOpen.value = !customPanelOpen.value),
+  },
+  {
+    name: 'export',
+    show: exportEnabled.value || !!props.exportConfig,
+    title: translate('导出'),
+    icon: 'download-2-line',
+    onClick: openExportDialog,
+  },
+])
+
+const isSwitchColumn = (col: LeafColumn) => {
+  if (col.editor === 'switch' || col.type === 'switch') return true
+  if ((col.editRender as any)?.name === 'switch' || (col.cellRender as any)?.name === 'switch') return true
+  return false
+}
+
+const copyToClipboard = async (text: string) => {
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text)
+    return
+  }
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  document.body.appendChild(textarea)
+  textarea.select()
+  try {
+    document.execCommand('copy')
+  } finally {
+    textarea.remove()
+  }
+}
+
+const copyTableData = async (
+  direction: 'vertical' | 'horizontal',
+  scope: 'all' | 'selected' = 'selected'
+) => {
+  let cols = leafColumns.value
+  let rows = visibleRows.value.map((f) => f.row)
+  const bounds = areaBounds.value
+  if (scope === 'selected' && bounds) {
+    cols = cols.slice(bounds.c0, bounds.c1 + 1)
+    rows = rows.slice(bounds.r0, bounds.r1 + 1)
+  }
+  if (!cols.length || !rows.length) {
+    qiuMsg.warning(translate('没有可复制的数据'))
+    return
+  }
+  if (direction === 'horizontal' && cols.some(isSwitchColumn)) {
+    qiuMsg.warning(translate('横向复制暂不支持包含开关/自定义渲染的列'))
+    return
+  }
+  const escapeCell = (v: any) => String(v ?? '').replace(/\t/g, ' ').replace(/\r?\n/g, ' ')
+  const cellText = (row: any, col: LeafColumn) => escapeCell(formatCell(row, col))
+  const headerText = (col: LeafColumn) => escapeCell(col.label || col.title || col.field || col._key)
+  let text = ''
+  if (direction === 'vertical') {
+    const lines: string[] = [cols.map(headerText).join('\t')]
+    rows.forEach((row) => lines.push(cols.map((col) => cellText(row, col)).join('\t')))
+    text = lines.join('\n')
+  } else {
+    const matrix: string[][] = []
+    matrix.push([''].concat(rows.map((_, i) => String(i + 1))))
+    cols.forEach((col) => {
+      matrix.push([headerText(col)].concat(rows.map((row) => cellText(row, col))))
+    })
+    text = matrix.map((line) => line.join('\t')).join('\n')
+  }
+  try {
+    await copyToClipboard(text)
+    qiuMsg.success(translate('已复制到剪贴板'))
+  } catch {
+    qiuMsg.error(translate('复制失败，请检查浏览器剪贴板权限'))
+  }
+}
+
+const closeCtxMenu = () => {
+  ctxMenu.visible = false
+}
+
+const onBodyContextMenu = (e: MouseEvent) => {
+  if (props.menuConfig?.enabled === false) return
+  const options = props.menuConfig?.body?.options
+  if (!options?.length) return
+  const tr = (e.target as HTMLElement).closest('tr') as HTMLElement | null
+  const rowKey = tr?.getAttribute('data-row-key') || ''
+  const row = rowKey ? findRowById(props.data, rowKey) : undefined
+  if (
+    props.menuConfig?.visibleMethod &&
+    props.menuConfig.visibleMethod({
+      type: 'body',
+      row,
+      options,
+    }) === false
+  ) {
+    return
+  }
+  ctxMenu.visible = true
+  ctxMenu.x = e.clientX
+  ctxMenu.y = e.clientY
+  ctxMenu.options = options
+  ctxMenu.row = row
+}
+
+const onMenuItemClick = (item: QiuTableMenuItem) => {
+  if (item.code === 'copy' || item.code === 'COPY') {
+    void copyArea()
+  } else if (item.code === 'cut' || item.code === 'CUT') {
+    void cutArea()
+  } else if (item.code === 'paste' || item.code === 'PASTE') {
+    void pasteArea()
+  }
+  emit('menu-click', { menu: item, row: ctxMenu.row, column: ctxMenu.column })
+  closeCtxMenu()
+}
+
+const copyArea = async () => {
+  if (clip().isCopy === false) return
+  const text = buildTsv((row, prop) => {
+    const col = leafColumns.value.find((c) => getProp(c) === prop)
+    return col ? formatCell(row, col) : String(row?.[prop] ?? '')
+  })
+  if (!text) return
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    // ignore
+  }
+}
+
+const applyClipboardValue = (row: any, prop: string, value: string) => {
+  const col = leafColumns.value.find((c) => getProp(c) === prop)
+  if (!col || !canEditCol(col)) {
+    row[prop] = value
+    return
+  }
+  void commitEdit(row, col, value)
+}
+
+const cutArea = async () => {
+  if (clip().isCut === false) return
+  await copyArea()
+  clearAreaValues((row, prop, value) => applyClipboardValue(row, prop, value))
+}
+
+const pasteArea = async () => {
+  if (clip().isPaste === false) return
+  try {
+    const text = await navigator.clipboard.readText()
+    pasteTsv(text, (row, prop, value) => applyClipboardValue(row, prop, value))
+  } catch {
+    // ignore
+  }
+}
+
+const focusCurrentRow = (row: any) => {
+  onRowClick(row)
+  nextTick(() => scrollToRow(row))
+}
+
+const onTableKeydown = (e: KeyboardEvent) => {
+  const allowCurrent = resolveRowCurrent(props.rowConfig)
+  const allowArrow = kb().isArrow !== false
+  const allowEnter = kb().isEnter !== false
+  const allowEsc = kb().isEsc !== false
+  const allowTab = kb().isTab === true
+  const allowUndo = kb().isUndo !== false && historyEnabled()
+
+  if (!props.editable && !allowCurrent && !allowUndo) return
+
+  const el = e.target as HTMLElement | null
+  const tag = el?.tagName
+  const inEditor =
+    tag === 'INPUT' ||
+    tag === 'TEXTAREA' ||
+    tag === 'SELECT' ||
+    !!el?.isContentEditable ||
+    !!el?.closest?.('.qiu-input, .qiu-select, .qiu-input-number, .qiu-time, .qiu-time-panel')
+
+  const mod = e.ctrlKey || e.metaKey
+
+  if (mod && (e.key === 'z' || e.key === 'Z') && allowUndo && !e.shiftKey) {
+    e.preventDefault()
+    undoEdit()
+    return
+  }
+  if (mod && ((e.key === 'y' || e.key === 'Y') || ((e.key === 'z' || e.key === 'Z') && e.shiftKey)) && allowUndo) {
+    e.preventDefault()
+    redoEdit()
+    return
+  }
+  if (mod && (e.key === 'c' || e.key === 'C') && clip().isCopy !== false) {
+    if (!inEditor) {
+      e.preventDefault()
+      void copyArea()
+    }
+    return
+  }
+  if (mod && (e.key === 'x' || e.key === 'X') && clip().isCut !== false) {
+    if (!inEditor) {
+      e.preventDefault()
+      void cutArea()
+    }
+    return
+  }
+  if (mod && (e.key === 'v' || e.key === 'V') && clip().isPaste !== false) {
+    if (!inEditor) {
+      e.preventDefault()
+      void pasteArea()
+    }
+    return
+  }
+
+  if (inEditor && kb().isEdit !== true) return
+
+  const rows = pagedRows.value.map((f) => f.row)
+  if (!rows.length) return
+  const idx = currentRowId.value
+    ? rows.findIndex((r) => getRowId(r) === currentRowId.value)
+    : -1
+  const extend = e.shiftKey
+
+  if (allowArrow && e.key === 'ArrowDown') {
+    e.preventDefault()
+    const moved = moveActive(1, 0, extend)
+    if (moved) focusCurrentRow(moved.row)
+    else if (allowCurrent) {
+      const next = rows[Math.min(rows.length - 1, Math.max(0, idx + 1))]
+      if (next) focusCurrentRow(next)
+    }
+  } else if (allowArrow && e.key === 'ArrowUp') {
+    e.preventDefault()
+    const moved = moveActive(-1, 0, extend)
+    if (moved) focusCurrentRow(moved.row)
+    else if (allowCurrent) {
+      const prev = rows[Math.max(0, idx <= 0 ? 0 : idx - 1)]
+      if (prev) focusCurrentRow(prev)
+    }
+  } else if (allowArrow && e.key === 'ArrowLeft') {
+    e.preventDefault()
+    const moved = moveActive(0, -1, extend)
+    if (moved) focusCurrentRow(moved.row)
+  } else if (allowArrow && e.key === 'ArrowRight') {
+    e.preventDefault()
+    const moved = moveActive(0, 1, extend)
+    if (moved) focusCurrentRow(moved.row)
+  } else if (allowTab && e.key === 'Tab') {
+    e.preventDefault()
+    const moved = moveActive(0, e.shiftKey ? -1 : 1, false)
+    if (moved) focusCurrentRow(moved.row)
+  } else if (allowEnter && e.key === 'Enter' && idx >= 0 && props.editable) {
+    if (editing.value) return
+    e.preventDefault()
+    const row = rows[idx]
+    const prop = activeCell.value?.prop
+    const col =
+      (prop && leafColumns.value.find((c) => getProp(c) === prop && canEditCol(c))) ||
+      leafColumns.value.find((c) => canEditCol(c) && getColEditor(c) !== 'switch')
+    if (row && col) startEdit(row, col, bodyWrapRef.value)
+  } else if (allowEsc && e.key === 'Escape') {
+    clearEdit()
+    clearArea()
+    closeCtxMenu()
+  }
+}
+
+const getGrid = () => ({
+  getTableData: () => ({ fullData: props.data }),
+  getCheckboxRecords,
+  clearEdit,
+  exportData,
+  setAllTreeExpand,
+  importData: triggerImport,
+  print: printTable,
+})
+
+const findRowById = (rows: any[], id: string): any | null => {
+  const childrenKey = resolvedTreeProps.value.children
+  for (const row of rows || []) {
+    if (getRowId(row) === id) return row
+    if (row?.[childrenKey]?.length) {
+      const found = findRowById(row[childrenKey], id)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+const initSortable = () => {
+  sortableInst?.destroy()
+  sortableInst = null
+  if (!dragEnabled.value) return
+  nextTick(() => {
+    const el = tbodyRef.value
+    if (!el) return
+    sortableInst = Sortable.create(el, {
+      handle: '.qiu-table__drag-handle',
+      animation: 150,
+      draggable: '.qiu-table__row:not(.qiu-table__row--empty)',
+      onEnd: (evt) => {
+        const dragId = (evt.item as HTMLElement)?.getAttribute('data-row-key') || ''
+        emit('row-dragend', {
+          dragRow: findRowById(props.data, dragId),
+          oldIndex: evt.oldIndex,
+          newIndex: evt.newIndex,
+        })
+      },
+    })
+  })
+}
+
+const registerContext: QiuTableRegisterContext = {
+  register(col) {
+    registeredColumns.value = [...registeredColumns.value.filter((c) => c.id !== col.id), col]
+  },
+  unregister(id) {
+    registeredColumns.value = registeredColumns.value.filter((c) => c.id !== id)
+  },
+  update(col) {
+    const idx = registeredColumns.value.findIndex((c) => c.id === col.id)
+    if (idx >= 0) {
+      const next = registeredColumns.value.slice()
+      next[idx] = col
+      registeredColumns.value = next
+    } else registerContext.register(col)
+  },
+}
+
+provide(QIU_TABLE_REGISTER_KEY, registerContext)
+
+watch(
+  () => [props.tree, props.defaultExpandAll, props.data],
+  () => {
+    if (!expandInitialized || props.defaultExpandAll) initExpandState()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => [dragEnabled.value, props.data.length, pagedRows.value.length],
+  () => initSortable()
+)
+
+watch(
+  () => [pagedRows.value.length, props.height, props.maxHeight, leafColumns.value.length],
+  () => nextTick(scheduleLayout)
+)
+
+onMounted(() => {
+  initSortable()
+  nextTick(() => {
+    scheduleLayout()
+    measureVirtual()
+    updateHasScrollX()
+  })
+})
+
+onBeforeUnmount(() => {
+  sortableInst?.destroy()
+  sortableInst = null
+  colSortableInst?.destroy()
+  colSortableInst = null
+})
+
+const CellContent = defineComponent({
+  name: 'QiuTableCellContent',
+  props: {
+    row: { type: Object, required: true },
+    col: { type: Object, required: true },
+    index: { type: Number, required: true },
+  },
+  setup(cellProps) {
+    return () => {
+      const row = cellProps.row as any
+      const col = cellProps.col as LeafColumn
+      const index = cellProps.index as number
+      const editor = getColEditor(col)
+      const prop = getProp(col)
+      const cellValue = prop != null ? row[prop] : undefined
+
+      if (hasAlwaysEditor(col) || isEditing(row, col)) {
+        return renderEditor(row, col)
+      }
+
+      const renderName =
+        typeof col.cellRender === 'string' ? col.cellRender : col.cellRender?.name
+      if (renderName && QiuTableRenderer.has(renderName)) {
+        const vnode = QiuTableRenderer.get(renderName)!({
+          cellValue,
+          row,
+          column: col,
+          $index: index,
+        })
+        if (vnode == null) return null
+        if (typeof vnode === 'string') return h('span', { class: 'qiu-table__text' }, vnode)
+        return vnode
+      }
+
+      let text = ''
+      if (editor === 'select' && col.options?.length) {
+        const hit = col.options.find((o) => o.value === cellValue)
+        text = hit?.label ?? formatCell(row, col)
+      } else {
+        text = formatCell(row, col)
+      }
+
+      const tip = resolveTooltipContent(row, col)
+      const useTip =
+        shouldEllipsis(col) &&
+        tip &&
+        !isEditing(row, col) &&
+        props.tooltipConfig?.showAll !== false
+
+      if (useTip) {
+        return h(
+          QiuTooltip,
+          {
+            content: tip,
+            placement: 'top',
+            showAfter: props.tooltipConfig?.enterDelay ?? 200,
+            hideAfter: props.tooltipConfig?.leaveDelay ?? 100,
+          },
+          {
+            default: () => h('span', { class: 'qiu-table__text' }, text),
+          }
+        )
+      }
+      return h('span', { class: 'qiu-table__text' }, text)
+    }
+  },
+})
+
+const resolveRowClassName = (row: any, rowIndex: number) => {
+  const fn = props.rowClassName
+  if (!fn) return ''
+  return typeof fn === 'function' ? fn({ row, rowIndex }) : fn
+}
+
+const resolveCellClassName = (
+  row: any,
+  column: QiuTableColumnConfig,
+  rowIndex: number,
+  columnIndex: number
+) => {
+  const fn = props.cellClassName
+  if (!fn) return ''
+  return typeof fn === 'function' ? fn({ row, column, rowIndex, columnIndex }) : fn
+}
+
+const setCurrentRow = (row: any | null) => {
+  if (row == null) {
+    currentRowId.value = null
+    emit('current-change', { row: null })
+    return
+  }
+  if (!resolveRowCurrent(props.rowConfig)) return
+  currentRowId.value = getRowId(row)
+  emit('current-change', { row })
+}
+
+const clearCurrentRow = () => {
+  currentRowId.value = null
+  clearArea()
+  emit('current-change', { row: null })
+}
+
+const clearSort = () => {
+  sortState.value = { prop: '', order: null }
+  sortList.value = []
+  emit('sort-change', { prop: '', order: null, sorts: [] } as any)
+}
+
+const clearFilter = (field?: string) => {
+  if (field) {
+    const col = leafColumns.value.find((c) => getProp(c) === field || c._key === field)
+    const key = col?._key
+    if (key) {
+      filterValues[key] = []
+      filterDraft[key] = []
+    }
+  } else {
+    Object.keys(filterValues).forEach((k) => {
+      filterValues[k] = []
+      filterDraft[k] = []
+    })
+  }
+  emit('filter-change', { ...filterValues })
+}
+
+const scrollTo = (opts: { top?: number; left?: number }) => {
+  const el = bodyWrapRef.value
+  if (!el) return
+  if (opts.top != null) el.scrollTop = opts.top
+  if (opts.left != null) el.scrollLeft = opts.left
+}
+
+const scrollToRow = (row: any) => {
+  const id = getRowId(row)
+  const el = bodyWrapRef.value?.querySelector(
+    `[data-row-key="${String(id).replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`
+  )
+  if (el instanceof HTMLElement) {
+    el.scrollIntoView({ block: 'nearest' })
+  }
+}
+
+const getColumnWidth = (fieldOrKey: string) => {
+  const col = leafColumns.value.find(
+    (c) => c._key === fieldOrKey || getProp(c) === fieldOrKey
+  )
+  return col ? colWidthOf(col) : undefined
+}
+
+const setColumnWidthByField = (fieldOrKey: string, width: number) => {
+  const col = leafColumns.value.find(
+    (c) => c._key === fieldOrKey || getProp(c) === fieldOrKey
+  )
+  if (col) setColumnWidth(col._key, width)
+}
+
+const recalculate = () => {
+  layoutTick.value++
+  nextTick(scheduleLayout)
+}
+
+defineExpose({
+  tableRef,
+  gridRef: tableRef,
+  getGrid,
+  clearEdit,
+  exportData,
+  getCheckboxRecords,
+  setAllTreeExpand,
+  importData: triggerImport,
+  print: printTable,
+  getRadioRecord: () => {
+    if (!radioRowId.value) return null
+    return findRowById(props.data, radioRowId.value)
+  },
+  clearRadioRow,
+  setRowExpand,
+  clearRowExpand,
+  getUpdateRecords,
+  getInsertRecords,
+  isUpdateByRow,
+  reloadRow,
+  reloadColumn: () => {
+    layoutTick.value++
+  },
+  setCurrentRow,
+  clearCurrentRow,
+  clearSort,
+  clearFilter,
+  scrollTo,
+  scrollToRow,
+  getColumnWidth,
+  setColumnWidth: setColumnWidthByField,
+  recalculate,
+  getColumns: () => leafColumns.value.slice(),
+  undo: undoEdit,
+  redo: redoEdit,
+  clearHistory,
+  canUndo,
+  canRedo,
+  copy: copyArea,
+  cut: cutArea,
+  paste: pasteArea,
+  copyData: copyTableData,
+})
+</script>
+
+<style lang="scss" src="./styles/table.scss"></style>