element plus el-table show-overflow-tooltip实现源码

element plus 2.7.2 版本

文件地址：packages/components/table/src/table-body/events-helper.ts

核心代码

const getPadding = (el: HTMLElement) => {const style = window.getComputedStyle(el, null)const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0const paddingRight = Number.parseInt(style.paddingRight, 10) || 0const paddingTop = Number.parseInt(style.paddingTop, 10) || 0const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0return {left: paddingLeft,right: paddingRight,top: paddingTop,bottom: paddingBottom,}}const handleCellMouseEnter = (event: MouseEvent,row: T,tooltipOptions: TableOverflowTooltipOptions) => {const table = parentconst cell = getCell(event)const namespace = table?.vnode.el?.dataset.prefixif (cell) {const column = getColumnByCell({columns: props.store.states.columns.value,},cell,namespace)if (cell.rowSpan > 1) {toggleRowClassByCell(cell.rowSpan, event, addClass)}const hoverState = (table.hoverState = { cell, column, row })table?.emit('cell-mouse-enter',hoverState.row,hoverState.column,hoverState.cell,event)}if (!tooltipOptions) {return}// 判断是否text-overflow, 如果是就显示tooltipconst cellChild = (event.target as HTMLElement).querySelector('.cell') as HTMLElementif (!(hasClass(cellChild, `${namespace}-tooltip`) &&cellChild.childNodes.length)) {return}/****从这里开始都是***/// use range width instead of scrollWidth to determine whether the text is overflowing// to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3const range = document.createRange()range.setStart(cellChild, 0)range.setEnd(cellChild, cellChild.childNodes.length)/** detail: https://github.com/element-plus/element-plus/issues/10790*  What went wrong?*  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:*    - Expected: 188*    - Actual: 188.00000762939453*/let rangeWidth = range.getBoundingClientRect().widthlet rangeHeight = range.getBoundingClientRect().heightconst offsetWidth = rangeWidth - Math.floor(rangeWidth)const { width: cellChildWidth, height: cellChildHeight } =cellChild.getBoundingClientRect()if (offsetWidth < 0.001) {rangeWidth = Math.floor(rangeWidth)}const offsetHeight = rangeHeight - Math.floor(rangeHeight)if (offsetHeight < 0.001) {rangeHeight = Math.floor(rangeHeight)}const { top, left, right, bottom } = getPadding(cellChild)const horizontalPadding = left + rightconst verticalPadding = top + bottomif (rangeWidth + horizontalPadding > cellChildWidth ||rangeHeight + verticalPadding > cellChildHeight ||cellChild.scrollWidth > cellChildWidth) {createTablePopper(tooltipOptions,cell.innerText || cell.textContent,cell,table)}}