el-tooltip 超出宽度显示文字提示，否则隐藏

需求：
设置固定宽度。
文字超出宽度，用...显示。鼠标悬停到文字上，用el-tooltip显示全部文字内容
如果文字未超出宽度，el-tooltip隐藏。
解决方法：

html

<el-tooltip effect="dark"
            :content="contentHover" // 第一步：鼠标悬停后显示的内容
            placement="top-end" 
            :disabled="isShowTooltip"  // 第二步：关闭文字提示功能
>
      <div class='linkTo' @mouseover="onMouseOver(name)"> // 第三步：鼠标移入事件，很关键
           <span :ref='name'>{{name}}</span>// 第四步 绑定ref
      </div>
</el-tooltip>

data

data(){
    return{
        name: '这里是需要展示的所以文字内容'，
        isShowTooltip: false,
        contentHover:  '',
    }
}

methods

methods:{
        onMouseOver(str) { // 内容超出，显示文字提示内容
            const tag = this.$refs[str]
            const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
            const contentWidth = tag.offsetWidth // 获取元素可视宽度
            this.isShowTooltip = contentWidth <= parentWidth  
            // 鼠标悬停后显示的内容
            this.contentHover = this.name
        }
}

css

.linkTo {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}