el-dropdown禁用自动翻转

Question

el-dropdown trigger='click' placement='bottom'>页面空间较小，怎么禁用翻转功能

Answer 1

在 Element UI 的 Dropdown 组件中，有一个名为 popper-append-to-body 的属性可以控制 Dropdown 的下拉菜单是否插入到 body 元素上。如果你希望禁用 popper 的翻转功能，你可以设置这个属性为 false。如下：

<el-dropdown trigger='click' placement='bottom' :popper-append-to-body="false">
  <!-- your dropdown items here -->
</el-dropdown>

设置 popper-append-to-body 为 false 后，下拉菜单就会作为 Dropdown 组件的子元素，而不是插入到 body 中，这样 popper 的翻转功能就会被禁用。
需要注意的是，禁用 popper 翻转可能会引起其他布局问题，比如当 Dropdown 组件位于页面底部时，下拉菜单可能会显示不全或超出窗口边界，处理这种情况需要额外的 CSS 调整和处理。