From 14e4a175b4c184e2a377281d4ec5a2b750ca02f0 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 30 Oct 2025 19:54:16 +0800
Subject: [PATCH] =?UTF-8?q?style(table):=20table=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E5=90=8E=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/table/Table.vue        | 21 +++++++++++++--------
 packages/form/src/table/useAdd.ts        |  1 +
 packages/form/src/table/useFullscreen.ts | 12 +-----------
 packages/form/src/theme/table.scss       |  9 ++++++---
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/form/src/table/Table.vue b/packages/form/src/table/Table.vue
index dfa23d87..8413cef5 100644
--- a/packages/form/src/table/Table.vue
+++ b/packages/form/src/table/Table.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="m-fields-table-wrap">
-    <teleport to="body" :disabled="!isFullscreen">
-      <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
+  <teleport to="body" :disabled="!isFullscreen">
+    <div
+      v-bind="$attrs"
+      class="m-fields-table-wrap"
+      :class="{ fixed: isFullscreen }"
+      :style="isFullscreen ? `z-index: ${nextZIndex()}` : ''"
+    >
+      <div class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
         <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
         <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
           <TMagicTable
@@ -28,7 +33,6 @@
             <TMagicButton
               :icon="Grid"
               size="small"
-              type="defalut"
               @click="toggleMode"
               v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
               >展开配置</TMagicButton
@@ -36,7 +40,6 @@
             <TMagicButton
               :icon="FullScreen"
               size="small"
-              type="defalut"
               @click="toggleFullscreen"
               v-if="config.enableFullscreen !== false"
             >
@@ -76,15 +79,15 @@
           </TMagicPagination>
         </div>
       </div>
-    </teleport>
-  </div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from 'vue';
 import { FullScreen, Grid } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from '@tmagic/design';
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
 
 import type { SortProp } from '../schema';
 import { sortChange } from '../utils/form';
@@ -121,6 +124,8 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
   modelName,
 );
 
+const { nextZIndex } = useZIndex();
+
 const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 useSortable(props, emit, tMagicTableRef, modelName);
diff --git a/packages/form/src/table/useAdd.ts b/packages/form/src/table/useAdd.ts
index 059647bc..ed05b3a2 100644
--- a/packages/form/src/table/useAdd.ts
+++ b/packages/form/src/table/useAdd.ts
@@ -78,6 +78,7 @@ export const useAdd = (
       if (typeof props.config.defaultAdd === 'function') {
         inputs = await props.config.defaultAdd(mForm, {
           model: props.model[modelName],
+          prop: props.prop,
           formValue: mForm?.values,
         });
       } else if (props.config.defaultAdd) {
diff --git a/packages/form/src/table/useFullscreen.ts b/packages/form/src/table/useFullscreen.ts
index 4bebe190..dde85cf1 100644
--- a/packages/form/src/table/useFullscreen.ts
+++ b/packages/form/src/table/useFullscreen.ts
@@ -1,22 +1,12 @@
-import { ref, useTemplateRef } from 'vue';
-
-import { useZIndex } from '@tmagic/design';
+import { ref } from 'vue';
 
 export const useFullscreen = () => {
   const isFullscreen = ref(false);
-  const mTableEl = useTemplateRef<HTMLDivElement>('mTable');
-
-  const { nextZIndex } = useZIndex();
 
   const toggleFullscreen = () => {
-    if (!mTableEl.value) return;
-
     if (isFullscreen.value) {
-      mTableEl.value.classList.remove('fixed');
       isFullscreen.value = false;
     } else {
-      mTableEl.value.classList.add('fixed');
-      mTableEl.value.style.zIndex = `${nextZIndex()}`;
       isFullscreen.value = true;
     }
   };
diff --git a/packages/form/src/theme/table.scss b/packages/form/src/theme/table.scss
index 6e4142ab..ff5f137e 100644
--- a/packages/form/src/theme/table.scss
+++ b/packages/form/src/theme/table.scss
@@ -1,9 +1,6 @@
 .m-fields-table-wrap {
   width: 100%;
-}
 
-.m-fields-table {
-  width: 100%;
   &.fixed {
     position: fixed;
     height: 100%;
@@ -14,6 +11,8 @@
     bottom: 0;
     z-index: 100;
     background: rgba(0, 0, 0, 0.5);
+    align-items: center;
+    display: flex;
 
     & > .el-form-item__content {
       z-index: 101;
@@ -25,6 +24,10 @@
       width: 95vw !important;
     }
   }
+}
+
+.m-fields-table {
+  width: 100%;
 
   th {
     background-color: #f2f2f2 !important;