关于elementUi组件el-tooltip 扩展

关于elementUi组件el-tooltip 扩展

业务场景：自己写的div内，文字过长，出现省略号，鼠标移入提示该内容，文字正常，鼠标移入，不显示

1. 代码如下：

div部分：
<el-tooltip class="look-col-val" effect="dark" placement="top" :disabled="showTooltipReceiverName" :content="lookDetailForm.receiverName">
       <div ref="tooltipReceiverName1">
          <span ref="tooltipReceiverName2">{{ lookDetailForm.receiverName }}</span>
       </div>
</el-tooltip>
css部分：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
js部分：
showTooltipReceiverName: true

checkWidthReceiverName() {
      const boxWidth = this.$refs.tooltipReceiverName1.offsetWidth
      const itemWidth = this.$refs.tooltipReceiverName2.offsetWidth
      this.showTooltipReceiverName = boxWidth > itemWidth
},
调用： this.$nextTick(() => this.checkWidthReceiverName())