problem causes
After the internal data of the Popover is dynamically obtained, the positioning caused by the size change of the Popover is inaccurate .
Solution
After the dynamic data is obtained, call updatePopper()the method of Popover to recalculate the position of Popover.
example
// 异步获取 Popover 中的数据
getTableData(params)
.then(res => {
this.$nextTick(() => {
if (this.$refs.popover) {
this.$refs.popover.updatePopper();
}
})
})
Notice
If the el-popover component is nested in the el-table, and the el-table contains fixedcolumns with attributes set, the above example popoverwill be an array, which is determined by the implementation of the fixed column of the el-table component (Multiple tables will be rendered).
At this point the above example can be modified to the following code
// 异步获取 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();
}
})
}
}
})
})