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

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

html

      
 // 第三步：鼠标移入事件，很关键
           {{name}}// 第四步 绑定ref
      

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;
}