Element-UI中el-table内嵌el-popover,在表格翻页后el-popover无法显示问题解决
在Element-UI中,如果你遇到了在el-table内嵌el-popover时,翻页后el-popover无法显示的问题,这通常是因为el-popover的定位出了问题。
解决方法:
- 确保el-popover的触发元素在每一页都是可见的。
- 使用
popper-append-to-body
属性,并设置为false
,这样可以确保el-popover在当前页面上下文中渲染。 - 如果上述方法不奏效,可以尝试监听el-table的滚动事件,并在滚动时重新定位el-popover。
示例代码:
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<el-popover
ref="popover"
placement="top"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容"
popper-append-to-body="false">
<span slot="reference">{{ scope.row.date }}</span>
</el-popover>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// 数据...
]
};
}
};
</script>
在这个例子中,我们使用了popper-append-to-body="false"
来确保el-popover在表格内部正确渲染。如果问题依然存在,你可能需要在滚动事件中手动更新el-popover的位置。
评论已关闭