vue el-table 单元格溢出展示el-tooltip 没溢出的不展示el-tooltip

vue核心代码

**data内showTitle默认为true**
data() {
    return {
    showTitle:true
    }
}

 <el-table-column :label="changeColumn(key)" v-for="(value,key,index) in tableData[0].attributes" :key="index" align="center" :width="changeWidth(key)">
            <template slot-scope="scope">
              <el-tooltip class="item" v-if="!showTitle" popper-class="atooltip" effect="light" :content="String(scope.row.attributes[key])" placement="top">
                <div class="toEllipsis" @mouseover="onShowNameTipsMouseenter">
                  {{ scope.row.attributes[key] }}
                </div>
              </el-tooltip>
              <div class="toEllipsis" @mouseover="onShowNameTipsMouseenter" v-if="showTitle">
                {{ scope.row.attributes[key] }}
              </div>
            </template>
          </el-table-column>

鼠标移入事件

    // 溢出隐藏
    onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        // 溢出了
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    },

样式

.toEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

效果：
1.移动到有省略号的单元格内时候：

2.移动到没有省略号的单元格内：