[elementplus] Quando a coluna de operação el-table usa o el-dropdown com teleported: false, o el-dropdown__popper será bloqueado pela el-table

Antes de resolver este problema, primeiro leia isto e siga a operação

需求:首先是因为我的项目非要使用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{
    
    
   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又被遮挡了

おすすめ

転載: blog.csdn.net/bbt953/article/details/131674035