<template> <!-- columns存在render,超出显示tooltip+省略号--> <Tooltip placement="right-end" :content="value" :disabled="!showTooltip" style="width: 100%"> <span ref="content" class="ivu-table-cell-tooltip-content" @mouseenter.stop="handleTooltipIn" @mouseleave.stop="handleTooltipOut"> {{ value }} </span> </Tooltip> </template> <script> export default { props: { value: { type: String } }, data () { return { showTooltip: false } }, methods: { handleTooltipIn () { const $content = this.$refs.content this.showTooltip = $content.scrollWidth > $content.offsetWidth }, handleTooltipOut () { this.showTooltip = false } } } </script> <style scoped lang='scss'> /deep/.ivu-tooltip-popper.ivu-tooltip-dark { // left: 0 !important; // left: 0 !important; .ivu-tooltip-inner { word-wrap: break-word; white-space: pre-wrap; } } </style>