el-dropdown全屏模式下不展示下拉菜单处理

AmyGeng1232025-03-24 21:58

解决方式：

在el-dropdown-menu标签上加上属性 :append-to-body="false"即可。

javascript 复制代码

<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown" :append-to-body="false">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

注意：

1.是在el-dropdown-menu上加，不是在 el-dropdown上加。

加上之后如果样式发生了变化，极大可能是因为代码里有对el-dropdown进行处理，只需要将el-dropdown-menu的样式重置下就行。

javascript 复制代码

 .el-dropdown-menu{
        width:200px;
        font-weight: 400;
}

原因

el-dropdown在全屏模式下不显示下拉菜单，是因为在全屏状态下他的父级依然是body，所以导致我们看不到。

分析说明

用devTools工具查看，发现el-dropdown-menu组件上有接收一个叫"appendToBody"的参数，默认为true。

element的其他组件。例如el-date-picker默认在全屏模式下也是也是不展示下拉菜单的，但是加上属性:append-to-body="false"就可以将元素不插入至 body 元素上。同理的，其实element底层已经对el-dropdown-menu也进行了全屏处理，虽然这个属性在文档上没有说明（害我研究好半天~） ，所以只需要给el-dropdown-menu这个标签加上:append-to-body="false"就可以了。