解决el-popover嵌入表格多列显示和被表格遮挡的问题

万般浮云

已于 2022-03-03 10:52:42 修改

阅读量3.7k

点赞数 1

分类专栏：前端问题文章标签： elementui vue.js javascript

于 2022-03-03 10:50:59 首次发布

本文链接：https://blog.youkuaiyun.com/Smilelifeeveryday/article/details/123247713

版权

前端问题专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在使用Element UI的el-popover组件时，解决其在表格多列显示及被遮挡的难题。内容涉及如何控制多个弹框的显示隐藏，以及通过调整样式来纠正偏移问题。在实际项目中，尤其是在组件抽离后遇到了一些意料之外的挑战，需要深入理解渲染层级和逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 需要加上fixed="right"解决小弹窗显示问题 -->
<el-table-column label="可编辑" width="120" align="center" fixed="right">
    <template slot-scope="scope">
		<span>{{ scope.row.balance }}元</span>
        <el-button
		    slot="reference"
		    size="mini"
			type="text"
			class="el-icon-edit"
			style="font-size: 15px; margin-left: 10px"
			@click="handleBalance(scope.row)"
		/>
        <!-- position: fixed;z-index: 99;解决被span嵌套导致被table遮挡问题 -->
        <el-popover :ref="`popover-${scope.row.id}`" style="position: fixed;z-index: 99;" popper-class="table-list-popper" placement="left" width="200">
			<el-form @submit.native.prevent> <!-- 解决input输入回车刷新问题 -->
			</el-form>
		</el-popover>
    </template>
</el-table-column>

// 开关
balancePopoverVisible(id, flag = false) {
	flag && this.$refs["popover-" + id].doShow();
	!flag && (this.$refs["popover-" + id].doClose());
},

这里实现的是列表之中使用el-popover实现小弹框编辑，然后需要解决控制多个el-popover显示隐藏和被遮挡问题，最后通过样式解决偏移问题

<style>
.table-list-popper {
	top: -170px;
	left: -130px;
}
</style>

实际上我项目中两个地方用到这个，但是另一个实现发现没有这些问题。。。，而这个是优化过来的，发现抽离组件后就GG了，具体问题？是渲染呢，还是嵌套呢？还是要理解根本的层级关系和渲染逻辑