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();
                       }
                   })
               }
           }
       })
   })

猜你喜欢

转载自blog.csdn.net/dark_cy/article/details/124860417