fix Table column tooltip bug,and Table/column add tooltipMaxWidth prop

This commit is contained in:
梁灏 2021-01-25 11:55:13 +08:00
parent db4ec3527a
commit b91f6536e1
2 changed files with 14 additions and 14 deletions

View file

@ -14,8 +14,8 @@
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template> <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'normal'"> <template v-if="renderType === 'normal'">
<template v-if="column.tooltip"> <template v-if="column.tooltip">
<Tooltip transfer :content="row[column.key]" :theme="tableRoot.tooltipTheme" :disabled="!showTooltip && !tooltipShow" :max-width="300" class="ivu-table-cell-tooltip" @on-popper-show="handleTooltipShow" @on-popper-hide="handleTooltipHide"> <Tooltip transfer :content="row[column.key]" :theme="column.tooltipTheme ? column.tooltipTheme : tableRoot.tooltipTheme" :disabled="!showTooltip" :max-width="column.tooltipMaxWidth ? column.tooltipMaxWidth : tableRoot.tooltipMaxWidth" class="ivu-table-cell-tooltip">
<span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span> <span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
</Tooltip> </Tooltip>
</template> </template>
<span v-else>{{row[column.key]}}</span> <span v-else>{{row[column.key]}}</span>
@ -75,8 +75,7 @@
renderType: '', renderType: '',
uid: -1, uid: -1,
context: this.$parent.$parent.$parent.currentContext, context: this.$parent.$parent.$parent.currentContext,
showTooltip: false, // overflow showTooltip: false // overflow
tooltipShow: false
}; };
}, },
computed: { computed: {
@ -153,16 +152,12 @@
}, },
handleTooltipIn () { handleTooltipIn () {
const $content = this.$refs.content; const $content = this.$refs.content;
this.showTooltip = $content.scrollWidth > $content.offsetWidth; let range = document.createRange();
}, range.setStart($content, 0);
handleTooltipOut () { range.setEnd($content, $content.childNodes.length);
this.showTooltip = false; const rangeWidth = range.getBoundingClientRect().width;
}, this.showTooltip = rangeWidth > $content.offsetWidth;
handleTooltipShow () { range = null;
this.tooltipShow = true;
},
handleTooltipHide () {
this.tooltipShow = false;
}, },
handleToggleTree () { handleToggleTree () {
this.$parent.$parent.$parent.toggleTree(this.row._rowKey); this.$parent.$parent.$parent.toggleTree(this.row._rowKey);

View file

@ -244,6 +244,11 @@
}, },
default: 'dark' default: 'dark'
}, },
// 4.5.0
tooltipMaxWidth: {
type: Number,
default: 300
},
// #5380 :key 使 index // #5380 :key 使 index
// 4.1 String // 4.1 String
rowKey: { rowKey: {