From 90e4bec70b25194446b6b7c8453ac7c9dc32bff3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 1 Sep 2026 15:09:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20=E9=81=BF=E5=85=8D=20Tooltip=20?=
 =?UTF-8?q?=E6=97=A0=E5=90=88=E6=B3=95=E8=A7=A6=E5=8F=91=E5=99=A8=E6=97=B6?=
 =?UTF-8?q?=E6=8A=A5=20ElOnlyChild?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

对比模式删除按钮与表格未就绪时，ElTooltip 默认插槽会变成 Comment，触发 Element Plus 警告。
---
 packages/design/src/Tooltip.vue               | 36 +++++++++++++++++--
 .../form/src/containers/GroupListItem.vue     |  4 +--
 packages/form/src/containers/table/Table.vue  |  3 +-
 .../tests/unit/containers/GroupList.spec.ts   |  8 ++++-
 .../form/tests/unit/containers/Table.spec.ts  | 12 ++++++-
 5 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/packages/design/src/Tooltip.vue b/packages/design/src/Tooltip.vue
index 6afbc530..2a3716fd 100644
--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@@ -1,5 +1,11 @@
 <template>
-  <component class="tmagic-design-tooltip" :is="uiComponent" v-bind="uiProps">
+  <!-- ElTooltip 的 ElOnlyChild 要求默认插槽至少有一个真实节点；v-if 为 false 时插槽是 Comment，会报 no valid child node found。 -->
+  <component
+    v-if="isLegitTooltipTrigger($slots.default?.())"
+    class="tmagic-design-tooltip"
+    :is="uiComponent"
+    v-bind="uiProps"
+  >
     <template #content>
       <slot name="content"></slot>
     </template>
@@ -8,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { Comment, computed, Fragment, Text, type VNode } from 'vue';
 
 import { getDesignConfig } from './config';
 import type { TooltipProps } from './types';
@@ -24,4 +30,30 @@ const ui = getDesignConfig('components')?.tooltip;
 const uiComponent = ui?.component || 'el-tooltip';
 
 const uiProps = computed<TooltipProps>(() => ui?.props(props) || props);
+
+/** 与 Element Plus `findFirstLegitChild` 对齐：Comment / 空文本不算合法 trigger。 */
+const isLegitTooltipTrigger = (nodes: VNode[] | undefined): boolean => {
+  if (!nodes?.length) return false;
+
+  for (const child of nodes) {
+    if (!child) continue;
+
+    switch (child.type) {
+      case Comment:
+        continue;
+      case Text: {
+        const text = typeof child.children === 'string' ? child.children.trim() : '';
+        if (text) return true;
+        continue;
+      }
+      case Fragment:
+        if (isLegitTooltipTrigger(child.children as VNode[])) return true;
+        continue;
+      default:
+        return true;
+    }
+  }
+
+  return false;
+};
 </script>
diff --git a/packages/form/src/containers/GroupListItem.vue b/packages/form/src/containers/GroupListItem.vue
index 35582591..371f81f4 100644
--- a/packages/form/src/containers/GroupListItem.vue
+++ b/packages/form/src/containers/GroupListItem.vue
@@ -80,9 +80,9 @@
             </div>
           </TMagicPopover>
 
-          <TMagicTooltip :content="`删除 ${title}`">
+          <!-- v-if 必须挂在 Tooltip 上：子节点为 false 时 ElOnlyChild 会报 no valid child node found -->
+          <TMagicTooltip v-if="!isCompare" :content="`删除 ${title}`">
             <TMagicButton
-              v-if="!isCompare"
               v-show="showDelete"
               size="default"
               link
diff --git a/packages/form/src/containers/table/Table.vue b/packages/form/src/containers/table/Table.vue
index 48d3f6ba..f4c3df5a 100644
--- a/packages/form/src/containers/table/Table.vue
+++ b/packages/form/src/containers/table/Table.vue
@@ -8,13 +8,14 @@
     >
       <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>
+        <!-- v-if 必须挂在 Tooltip 上：表格未就绪时 ElOnlyChild 会报 no valid child node found -->
         <TMagicTooltip
+          v-if="model[modelName]"
           content="拖拽可排序"
           placement="left-start"
           :disabled="config.dropSort !== true || config.dropSortHandle"
         >
           <TMagicTable
-            v-if="model[modelName]"
             ref="tMagicTable"
             style="width: 100%"
             show-header
diff --git a/packages/form/tests/unit/containers/GroupList.spec.ts b/packages/form/tests/unit/containers/GroupList.spec.ts
index 50488e26..420466fd 100644
--- a/packages/form/tests/unit/containers/GroupList.spec.ts
+++ b/packages/form/tests/unit/containers/GroupList.spec.ts
@@ -180,7 +180,8 @@ describe('GroupList container', () => {
       expect(item.props('model')).toEqual({});
     });
 
-    test('对比模式隐藏底部操作栏与复制/移动按钮', async () => {
+    test('对比模式隐藏底部操作栏与复制/移动/删除按钮，且不触发 ElOnlyChild 警告', async () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
       const wrapper = mountForm(
         compareConfig,
         { list: [{ text: 'a' }, { text: 'b' }] },
@@ -192,9 +193,14 @@ describe('GroupList container', () => {
       await nextTick();
       await nextTick();
       expect(wrapper.find('.m-fields-group-list-footer').exists()).toBe(false);
+      expect(wrapper.find('.delete-button').exists()).toBe(false);
       expect(wrapper.text()).not.toContain('复制');
       expect(wrapper.text()).not.toContain('上移');
       expect(wrapper.text()).not.toContain('下移');
+      expect(
+        warn.mock.calls.some((args) => args.some((arg) => String(arg?.message ?? arg).includes('ElOnlyChild'))),
+      ).toBe(false);
+      warn.mockRestore();
     });
   });
 
diff --git a/packages/form/tests/unit/containers/Table.spec.ts b/packages/form/tests/unit/containers/Table.spec.ts
index 81f17dff..62e20ddc 100644
--- a/packages/form/tests/unit/containers/Table.spec.ts
+++ b/packages/form/tests/unit/containers/Table.spec.ts
@@ -3,7 +3,7 @@
  *
  * Copyright (C) 2025 Tencent.
  */
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import ElementPlus from 'element-plus';
@@ -41,4 +41,14 @@ describe('Table container —— 对比模式', () => {
     await nextTick();
     expect(wrapper.text()).not.toContain('清空');
   });
+
+  test('model 为空时不渲染表格，且不触发 ElOnlyChild 警告', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    mountTable({ model: { list: undefined } });
+    await nextTick();
+    expect(
+      warn.mock.calls.some((args) => args.some((arg) => String(arg?.message ?? arg).includes('ElOnlyChild'))),
+    ).toBe(false);
+    warn.mockRestore();
+  });
 });