element ui 中 Popover 组件定位不精准的问题

问题原因

　　Popover 内部数据动态获取到之后，Popover 尺寸变化导致的定位不准确。

解决方法

　　动态数据获取到之后，调用 Popover 的 updatePopper() 方法重新计算 Popover 的位置。

示例

// 异步获取 Popover 中的数据
getTableData(params)
   .then(res => {
       this.$nextTick(() => {
          if (this.$refs.popover) {
             this.$refs.popover.updatePopper();
          }
       })
   })

注意

　　如果 el-popover 组件是嵌套在 el-table 中使用，且 el-table 含有设置了 fixed 属性的列，则上例中的 popover 会是一个数组，这是由 el-table 组件 fixed 列的实现方式决定的（会渲染出多个表格）。

　　此时上例可以修改为下面的代码

// 异步获取 Popover 中的数据
getTableData(params)
   .then(res => {
       this.$nextTick(() => {
       	   // 表格中要获取到指定行的 popover，popoverKey 可以是 row.id 之类的
           let popover = this.$refs['popover' + popoverKey];
           if(popover) {
               if (popover.updatePopper) {
                   popover.updatePopper();
               } else {
                   // 因为表格用到了 fixed 列，所以 selectPopover 会是一个列表
                   popover.forEach(item => {
                   	   // 列表中只有一个 popover 是有用的
                       if (item.updatePopper) {
                           item.updatePopper();
                       }
                   })
               }
           }
       })
   })