el-dropdown 下拉菜单元素太多 页面抖动

问题描述

场景：在使用下拉菜单时，因为选项内容较多且纵向一列显示，导致它的列表撑出了画面外。当鼠标移入未展示部分时，页面下方会多出部分空白区域，视觉效果上会导致整个页面内容向上抖动。

解决方案

可以添加 class 类名，进行样式处理。这里是通过固定菜单宽度，以及使用 grid 布局实现横向等宽排列，可根据实际使用场景进行调整。

<el-dropdown>
    <template #dropdown>
        <el-dropdown-menu class="dropdown-max">
            <el-dropdown-item command="item1">选项1</el-dropdown-item>
            ……
        </el-dropdown-menu>
    </template>
</el-dropdown>

.dropdown-max {
  max-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
}

页面效果：