el-popover 初始弹出位置不准确，及el-popover

问题描述

使用el-popover 弹窗框，弹出提示，初始化提示位置不正确

<el-popover
                ref="popperHeart"
                placement="bottom"
                width="720"
                trigger="click">
                <div class="help-tips">
                  <div class="help-tips-title">
                    功能分级的比较
                  </div>
                  <el-table
                    border
                    class="common-table"
                    :data="Dict.exhaustionTable"
                    height="345">
                    <el-table-column
                      prop="stage"
                      label="阶段"
                      width="120" />
                    <el-table-column
                      prop="definition"
                      label="定义" />
                  </el-table>
                </div>
                <img
                  slot="reference"
                  :src="require('@/assets/images/help-icon.png')"
                  @load="imgLoad">
              </el-popover>

---

解决方案：

给嵌套的Table 设置高度后，位置就正确了

其他关于el-popover 位置的问题：

1. 如果里面数据动态化之后有问题位置不正确

/**
* 需获取到数据之后要
* this.$refs.popover.updatePopper()一下（用来重新计算位置的）
*/
  this.$nextTick(()=> {
    this.$refs.dcPopover.updatePopper() // 注意主要是这里
   })

2. 触发方式为 hover 时的,可以修改open-delay

// open-delay 属性 值 过小时 没有作用
<el-popover ref="popperHeart" placement="bottom" width="720"  trigger="hover" :open-delay="500">

3. 设置popper 的边界元素 boundariesElement: ‘viewport’,

<el-popover 
    ref="popperHeart" 
    placement="bottom" 
    width="720" 
    trigger="hover"
    :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
>

boundariesElement默认是’viewport’，如果不需要跟边界重新计算元素的位置设置为’body’即可