vue el-tooltip 在数据更新之后没有title 提示框显示, 需要刷新页面才有title 提示框显示

   项目中遇到一个问题,就是使用el-tooltip 包裹了一个span标签,在数据变化时,span标签的数据显示了出来,而el-tooltip 的title提示框却没有显示出来,我一开是推断可能是diff算法的问题,数据层级太深了,从而导致了数据未显示出来,然后我就给el-tooltip添加了一个key值如下代码:

<el-tooltip class="item" effect="light"   placement="top" :key="tooltip"> 
    <!-- title 显示的内容 -->                           
      <span slot="content"> {{itemChild}}</span> 
      <span v-if="itemChild" :class="[key == 'threat' ? 'threat conterMain' : conterMain]">{{itemChild}}</span>
  </el-tooltip>

   但是在项目运行了之后,我手动添加了一个数据,首页页面数据刷新显示了出来,但是当我把鼠标放上去的时候还是没有title的提示框效果.这个时候的我打开了F12的调试框,发现是数据的显示问题,如下:

   通过上图的Element中的数据对比发现,有title效果的比没有title提示框效果的多了一行代码: aria-describedby=“el-tooltip-4653” tabindex=“0”; 而没有数据也是有一个空的p标签存在,

<span class="el-tooltip conterMain" aria-describedby="el-tooltip-4653" tabindex="0">  </span>
<span class="el-tooltip conterMain threat"> </span>
<p><!----><!----></p>

   因为在数据变更的时候,el-tooltip标签已经存在了,变化的只是最下面的span标签所以我推断是我的 v-if 在我最底级的span标签上面的原因,只需要把判断标签放在 el-tooltip 上面即可.

<el-tooltip class="item" effect="light"   placement="top" v-if="itemChild" > 
    <!-- title 显示的内容 -->                           
      <span slot="content"> {{itemChild}}</span> 
      <span :class="[key == 'threat' ? 'threat conterMain' : conterMain]">{{itemChild}}</span>
  </el-tooltip>

   最后在运行的时候数据在新增变化,el-tooltip的弹框就可以正常的显示.
   如果有不对的地方请各位大佬留言指出,也希望大家可以互相关注学习,共同进步!!!