From ffb30818cfceb719b3e8a4cc903a1c5820d23e74 Mon Sep 17 00:00:00 2001
From: xingyixiang <452282988@qq.com>
Date: Sun, 10 Nov 2024 16:02:34 +0800
Subject: [PATCH] fix(components): [table] failed to insert tooltip when
 show-overflow-tooltip is enabled (#18317)

* fix:The namespace of the showOverflowTooltip is invalid.

* fix(components): [scrollbar] multiple rendering

* fix(components): [scrollbar] multiple rendering

* fix(components): [scrollbar] multiple rendering

* Update packages/components/scrollbar/src/bar.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* test(components): [scrollbar] adjusting style attributes

* fix(components): [table] Failed to insert node when show-overflow-tooltip is enabled

* fix(components): [table] Failed to insert node when show-overflow-tooltip is enabled

* fix(components): [table] Failed to insert node when show-overflow-tooltip is enabled

* fix(components): [table] Failed to insert node when show-overflow-tooltip is enabled

---------

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
---
 packages/components/table/src/util.ts | 34 ++++++++++++++++++---------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts
index e18ae3a031..863e9d267e 100644
--- a/packages/components/table/src/util.ts
+++ b/packages/components/table/src/util.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { createVNode, render } from 'vue'
-import { flatMap, get } from 'lodash-unified'
+import { flatMap, get, merge } from 'lodash-unified'
 import {
   hasOwn,
   isArray,
@@ -16,6 +16,7 @@ import ElTooltip, {
 } from '@element-plus/components/tooltip'
 import type { Table, TreeProps } from './table/defaults'
 import type { TableColumnCtx } from './table-column/defaults'
+import type { VNode } from 'vue'
 
 export type TableOverflowTooltipOptions = Partial<
   Pick<
@@ -36,6 +37,7 @@ export type TableOverflowTooltipOptions = Partial<
 
 type RemovePopperFn = (() => void) & {
   trigger?: HTMLElement
+  vm?: VNode
 }
 
 export const getCell = function (event: Event) {
@@ -363,6 +365,20 @@ export function walkTreeNode(
   })
 }
 
+const getTableOverflowTooltipProps = (
+  props: TableOverflowTooltipOptions,
+  content: string
+) => {
+  return {
+    content,
+    ...props,
+    popperOptions: {
+      strategy: 'fixed',
+      ...props.popperOptions,
+    },
+  }
+}
+
 export let removePopper: RemovePopperFn | null = null
 
 export function createTablePopper(
@@ -372,17 +388,16 @@ export function createTablePopper(
   table: Table<[]>
 ) {
   if (removePopper?.trigger === trigger) {
+    merge(
+      removePopper!.vm.component.props,
+      getTableOverflowTooltipProps(props, popperContent)
+    )
     return
   }
   removePopper?.()
   const parentNode = table?.refs.tableWrapper
   const ns = parentNode?.dataset.prefix
-  const popperOptions = {
-    strategy: 'fixed',
-    ...props.popperOptions,
-  }
   const vm = createVNode(ElTooltip, {
-    content: popperContent,
     virtualTriggering: true,
     virtualRef: trigger,
     appendTo: parentNode,
@@ -390,11 +405,7 @@ export function createTablePopper(
     transition: 'none', // Default does not require transition
     offset: 0,
     hideAfter: 0,
-    ...props,
-    popperOptions,
-    onHide: () => {
-      removePopper?.()
-    },
+    ...getTableOverflowTooltipProps(props, popperContent),
   })
   vm.appContext = { ...table.appContext, ...table }
   const container = document.createElement('div')
@@ -407,6 +418,7 @@ export function createTablePopper(
     removePopper = null
   }
   removePopper.trigger = trigger
+  removePopper.vm = vm
   scrollContainer?.addEventListener('scroll', removePopper)
 }