elementUI表格中气泡位置偏移

1、气泡位置偏移这个问题出现，是由于，需求要求打破了常规模式，要求“elementUI表格内容根据高度来判断是否显示气泡”，这时候我们会发现，气泡在底层代码中是以实际高度的位置来判断气泡显示的位置，而不是以我们在样式中设置的height这个判断。
“elementUI表格内容根据高度来判断是否显示气泡” 这个需求的实现见文章 https://blog.csdn.net/CuiCui_web/article/details/106531997


由上图就可以看到，这个问题的根本原因就是上面说的，底层中是以实际高度来判断显示气泡。看过elementUI表格内容根据高度来判断是否显示气泡”
这篇文章你就知道实现这里的气泡，是利用的插槽。这时候，我们只需要在原来基础上加一层结构就可以啦，然后结构上加一个class,编写公共样式，就可以解决这个底层的缺陷问题，

<div class="slot-tooltip-div">
		这里放表格单元显示的内容
</div>

样式核心代码为：

样式代码为：

//  固定8行高度超出显示气泡end
/deep/ .el-table.testHeightTip8Row td>
.cell{
  max-height: 184px !important;
  line-height: 23px;
  vertical-align: middle;
  white-space: pre-wrap;
  text-align: left;
  // 插槽气泡位置问题处理
  .slot-tooltip-div{
    max-height: 184px !important;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8; /*可以显示的行数，超出部分用...表示 */
    -webkit-box-orient: vertical;
  }
}

//  固定4行高度超出显示气泡end
/deep/ .el-table.testHeightTip4Row td>
.cell{
  max-height: 92px !important;
  line-height: 23px;
  vertical-align: middle;
  white-space: pre-wrap;
  text-align: left;
  // 插槽气泡位置问题处理
  .slot-tooltip-div{
    height: 92px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /*可以显示的行数，超出部分用...表示 */
    -webkit-box-orient: vertical;
  }
}

2、当我们快速切换tab或者菜单，发现，气泡会乱串，在a界面气泡出现在b界面，然后也会消失。这样用户体验非常不好。
也就是下面这个bug描述

为什么会出现这个问题呢？
原因是elementUI底层是用js挂在气泡在body中，每次鼠标移入，都只是通过通过display来控制显示隐藏，实际DOM中还有气泡节点，快速操作过程中，这里display偶现为block的情况，就出现这个bug。
目前系统中涉及本次需求的气泡，是用的v-if控制，传统模式v-if控制显示隐藏，会销毁DOM，但是在气泡这里没有，就是底层是运用js进行挂在

下面介绍一种思路，销毁气泡组件，可能不是最好的方法，但是目前想到的可行的方案。

我们监听路由的变化，然后在这里进行处理，移出且销毁气泡。

用这个方法会有一些副作用，不建议使用（会导致elementUI表格出的min-width属性失效）

后续有更好的方法，再持续更新