问题原因
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();
}
})
}
}
})
})