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

Table: optimize tooltip logic (#11137)

pull/11144/head
杨奕 2018-05-13 11:47:19 +08:00 committed by GitHub
parent f4a16657e4
commit 6289144d84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -336,15 +336,18 @@ export default {
// 判断是否text-overflow, 如果是就显示tooltip // 判断是否text-overflow, 如果是就显示tooltip
const cellChild = event.target.querySelector('.cell'); const cellChild = event.target.querySelector('.cell');
if (!hasClass(cellChild, 'el-tooltip')) {
return;
}
// use range width instead of scrollWidth to determine whether the text is overflowing // 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#c3 // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
const range = document.createRange(); const range = document.createRange();
range.setStart(cellChild, 0); range.setStart(cellChild, 0);
range.setEnd(cellChild, 1); range.setEnd(cellChild, cellChild.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width; const rangeWidth = range.getBoundingClientRect().width;
const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) + const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
(parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0); (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
if (hasClass(cellChild, 'el-tooltip') && rangeWidth + padding > cellChild.offsetWidth && this.$refs.tooltip) { if (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;