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) }