【elementplus】el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题

湛海不过深蓝

已于 2023-08-09 14:28:34 修改

阅读量1.6k

点赞数 3

分类专栏： elementuiPlus 文章标签： vue.js 前端 elementui

于 2023-07-12 09:39:14 首次发布

本文链接：https://blog.csdn.net/bbt953/article/details/131674035

版权

elementuiPlus 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

由于项目使用zoom适配导致el-dropdown__popper错位，设置teleported为false后，在el-table内部会因超出隐藏被遮挡。解决方法是通过CSS调整z-index和overflow属性，确保el-dropdown__popper在hover时位于顶层且不设置top和left值，以防止滚动时出现遮挡问题。

摘要由CSDN通过智能技术生成

解决该问题前，先看这个照着操作

需求：首先是因为我的项目非要使用zoom做适配导致的一系列bug，为了解决el-dropdown__popper错位的问题，我必须设置teleported: false，然后又是在el-table中使用el-dropdown，才导致的el-dropdown__popper被遮挡

原因：当teleported设置为false时，会因为el-table的超出隐藏被截断，导致的el-dropdown__popper被覆盖。而el-dropdown源码里面开启teleported时，这样 dropdown 就会挂载到 body 上，此时是根据视窗去判断展开位置的，不会因为 el-table 超出隐藏导致被截断了。

除非把源码改成根据外部滚动容器去判断，才能在不设置teleported时解决错位。但我不会改源码。

解决方法：设置css提高当前需要展开的el-dropdown__poppver所处的el-table__row的z-index，并设置el-dropdown所处的外部容器overflow: visibile

.cell{			// 仅针对操作列的.cell，一定要设置oberflow: visible，不然el-dropdown还是会被折叠
   overflow: visible;
 }

 :deep(.el-table__row) {
   position: relative !important;
   z-index: 0 !important;
 }

 :deep(.el-table__row.hover-row) {
   position: relative !important;
   z-index: 10 !important;
 }

注意：如果是解决被el-table遮挡的问题，el-dropdown__popper就不要去设置top和left值，就让他的inset自动显示位置，不然如果el-table的父元素有滚动，会出现滚动置顶时，可能表格第四行开始的el-dropdown__popper又会被遮挡，但是滚动置底时，又出来了，但是第一、二行的el-dropdown__popper又被遮挡了