mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [table] multiple line ellipsis tooltip takes effect (#12805)

Browse Source
This commit is contained in:
btea 2023-07-02 17:26:19 +08:00 committed by GitHub
parent 2f8f477e0d
commit 6f4560e57a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/components/table/src/table-body/events-helper.ts
View File

@ -1,7 +1,7 @@
// @ts-nocheck
import { h, inject, ref } from 'vue'
import { debounce } from 'lodash-unified'
import { getStyle, hasClass } from '@element-plus/utils'
import { hasClass } from '@element-plus/utils'
import { useZIndex } from '@element-plus/hooks'
import { createTablePopper, getCell, getColumnByCell } from '../util'
import { TABLE_INJECTION_KEY } from '../tokens'
@ -49,6 +49,19 @@ function useEvents<T>(props: Partial<TableBodyProps<T>>) {
const handleMouseLeave = debounce(() => {
props.store.commit('setHoverRow', null)
}, 30)
const getPadding = (el: HTMLElement) => {
const style = window.getComputedStyle(el, null)
const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0
const paddingRight = Number.parseInt(style.paddingRight, 10) || 0
const paddingTop = Number.parseInt(style.paddingTop, 10) || 0
const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
return {
left: paddingLeft,
right: paddingRight,
top: paddingTop,
bottom: paddingBottom,
}
}
const handleCellMouseEnter = (
event: MouseEvent,
row: T,
@ -103,11 +116,13 @@ function useEvents<T>(props: Partial<TableBodyProps<T>>) {
* - Actual: 188.00000762939453
*/
const rangeWidth = Math.round(range.getBoundingClientRect().width)
const padding =
(Number.parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
(Number.parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0)
const rangeHeight = Math.round(range.getBoundingClientRect().height)
const { top, left, right, bottom } = getPadding(cellChild)
const horizontalPadding = left + right
const verticalPadding = top + bottom
if (
rangeWidth + padding > cellChild.offsetWidth ||
rangeWidth + horizontalPadding > cellChild.offsetWidth ||
rangeHeight + verticalPadding > cellChild.offsetHeight ||
cellChild.scrollWidth > cellChild.offsetWidth
) {
createTablePopper(