From 674b83036ef3b7b5c3246b3f5ec45ef368b9937f Mon Sep 17 00:00:00 2001 From: ldd Date: Fri, 8 Nov 2019 15:51:31 +0800 Subject: [PATCH 1/3] enable tooltip when content overflows table cell --- components/table/interface.js | 1 + components/table/style/index.less | 10 ++++ components/vc-table/src/TableCell.jsx | 66 ++++++++++++++++++++++++--- 3 files changed, 70 insertions(+), 7 deletions(-) diff --git a/components/table/interface.js b/components/table/interface.js index 8b61384c43..3bcb640555 100644 --- a/components/table/interface.js +++ b/components/table/interface.js @@ -37,6 +37,7 @@ export const ColumnProps = { filteredValue: PropTypes.array, sortOrder: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['ascend', 'descend'])]), sortDirections: PropTypes.array, + showOverflowTooltip: PropTypes.bool, // children?: ColumnProps[]; // onCellClick?: (record: T, event: any) => void; // onCell?: (record: T) => any; diff --git a/components/table/style/index.less b/components/table/style/index.less index 3bb44cf259..012f0167d5 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -200,6 +200,16 @@ &-tbody > tr > td { border-bottom: @border-width-base @border-style-base @border-color-split; transition: all 0.3s, border 0s; + + &.has-tooltip { + + > div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + } } &-thead > tr, diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx index 3efa16a6be..5c1971c895 100644 --- a/components/vc-table/src/TableCell.jsx +++ b/components/vc-table/src/TableCell.jsx @@ -1,6 +1,7 @@ import PropTypes from '../../_util/vue-types'; import get from 'lodash/get'; import { isValidElement, mergeProps } from '../../_util/props-util'; +import Tooltip from '../../tooltip'; function isInvalidRenderCellText(text) { return ( @@ -20,6 +21,33 @@ export default { expandIcon: PropTypes.any, component: PropTypes.any, }, + data() { + return { + tooltipContent: '', + notShowTooltip: false, + tooltipVisible: false, + }; + }, + mounted() { + if (this.column.showOverflowTooltip) { + let cell = this.$el; + let cellWidth = cell.getBoundingClientRect().width; + + // get real text width + let textWrapper = document.createElement('span'); + textWrapper.innerText = this.tooltipContent; + document.body.appendChild(textWrapper); + let range = document.createRange(); + range.setStart(textWrapper, 0); + range.setEnd(textWrapper, 1); + const textWidth = range.getBoundingClientRect().width; + document.body.removeChild(textWrapper); + + if (cellWidth > textWidth) { + this.notShowTooltip = true; + } + } + }, methods: { handleClick(e) { const { @@ -30,6 +58,9 @@ export default { onCellClick(record, e); } }, + handleVisibilityChange(visible) { + this.tooltipVisible = this.notShowTooltip ? false : visible; + }, }, render() { @@ -55,6 +86,8 @@ export default { } else { text = get(record, dataIndex); } + this.tooltipContent = text; + let tdProps = { props: {}, attrs: {}, @@ -100,12 +133,31 @@ export default { tdProps.style = { ...tdProps.style, textAlign: column.align }; } - return ( - - {indentText} - {expandIcon} - {text} - - ); + if (column.showOverflowTooltip) { + return ( + + +
+ {indentText} + {expandIcon} + {text} +
+ + + ); + } else { + return ( + + {indentText} + {expandIcon} + {text} + + ); + } + }, }; From 72585d694f52c24d26bf5a741c52525b59ffa270 Mon Sep 17 00:00:00 2001 From: ldd Date: Fri, 8 Nov 2019 19:25:17 +0800 Subject: [PATCH 2/3] code refactor --- components/vc-table/src/TableCell.jsx | 44 ++++++++++++--------------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx index 5c1971c895..5d3c55e787 100644 --- a/components/vc-table/src/TableCell.jsx +++ b/components/vc-table/src/TableCell.jsx @@ -133,31 +133,25 @@ export default { tdProps.style = { ...tdProps.style, textAlign: column.align }; } - if (column.showOverflowTooltip) { - return ( - - -
- {indentText} - {expandIcon} - {text} -
- - - ); - } else { - return ( - - {indentText} - {expandIcon} - {text} - - ); - } + const cellContent = [ + indentText, + expandIcon, + text, + ]; + return column.showOverflowTooltip ? ( + + +
{cellContent}
+ + + ) : ( + + {cellContent} + + ); }, }; From 1031722b275aec1a73e3c2d99d534660ea16c9bf Mon Sep 17 00:00:00 2001 From: ldd Date: Fri, 8 Nov 2019 19:25:17 +0800 Subject: [PATCH 3/3] code refactor --- components/vc-table/src/TableCell.jsx | 64 +++++++++++++-------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx index 5c1971c895..69e51a40dc 100644 --- a/components/vc-table/src/TableCell.jsx +++ b/components/vc-table/src/TableCell.jsx @@ -61,6 +61,17 @@ export default { handleVisibilityChange(visible) { this.tooltipVisible = this.notShowTooltip ? false : visible; }, + getRawText(record, dataIndex) { + let text; + if (typeof dataIndex === 'number') { + text = get(record, dataIndex); + } else if (!dataIndex || dataIndex.length === 0) { + text = record; + } else { + text = get(record, dataIndex); + } + return text; + }, }, render() { @@ -78,14 +89,7 @@ export default { const cls = className || column.class; // We should return undefined if no dataIndex is specified, but in order to // be compatible with object-path's behavior, we return the record object instead. - let text; - if (typeof dataIndex === 'number') { - text = get(record, dataIndex); - } else if (!dataIndex || dataIndex.length === 0) { - text = record; - } else { - text = get(record, dataIndex); - } + let text = this.getRawText(record, dataIndex); this.tooltipContent = text; let tdProps = { @@ -133,31 +137,25 @@ export default { tdProps.style = { ...tdProps.style, textAlign: column.align }; } - if (column.showOverflowTooltip) { - return ( - - -
- {indentText} - {expandIcon} - {text} -
- - - ); - } else { - return ( - - {indentText} - {expandIcon} - {text} - - ); - } + const cellContent = [ + indentText, + expandIcon, + text, + ]; + return column.showOverflowTooltip ? ( + + +
{cellContent}
+ + + ) : ( + + {cellContent} + + ); }, };