github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: use Range to determine text overflow (#11124)

pull/11127/head
杨奕 2018-05-11 18:09:28 +08:00 committed by GitHub
parent 68db03fc22
commit f4d2f14788
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/table/src/table-body.js
View File

@ -1,5 +1,5 @@
import { getCell, getColumnByCell, getRowIdentity } from './util'; import { getCell, getColumnByCell, getRowIdentity } from './util';
import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom'; import { getStyle, hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
import ElCheckbox from 'element-ui/packages/checkbox'; import ElCheckbox from 'element-ui/packages/checkbox';
import ElTooltip from 'element-ui/packages/tooltip'; import ElTooltip from 'element-ui/packages/tooltip';
import debounce from 'throttle-debounce/debounce'; import debounce from 'throttle-debounce/debounce';
@ -336,8 +336,15 @@ export default {
// 判断是否text-overflow, 如果是就显示tooltip // 判断是否text-overflow, 如果是就显示tooltip
const cellChild = event.target.querySelector('.cell'); const cellChild = event.target.querySelector('.cell');
// use range width instead of scrollWidth to determine whether the text is overflowing
if (hasClass(cellChild, 'el-tooltip') && cellChild.scrollWidth > cellChild.offsetWidth && this.$refs.tooltip) { // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, 1);
const rangeWidth = range.getBoundingClientRect().width;
const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
(parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
if (hasClass(cellChild, 'el-tooltip') && rangeWidth + padding > cellChild.offsetWidth && this.$refs.tooltip) {
const tooltip = this.$refs.tooltip; const tooltip = this.$refs.tooltip;
// TODO 会引起整个 Table 的重新渲染，需要优化 // TODO 会引起整个 Table 的重新渲染，需要优化
this.tooltipContent = cell.textContent || cell.innerText; this.tooltipContent = cell.textContent || cell.innerText;