怎么在Dom元素全屏的时候让Element的select组件正常显示？

最近项目开发中，遇到一个奇怪的bug：在使用Element的select组件时，当Dom元素全屏模式的时候，select组件的下拉菜单不见了。

奇怪的是，查看控制台发现，select组件的Dom节点实际上是存在的。

解决方案

Element官方提供了解决方案，popper-append-to-body属性，是否将弹出框插入至body元素。当值为false的时候，这时即使Dom元素处于全屏模式，select组件也正常显示。

<el-select
  v-model="value"
  placeholder="请选择"
  :popper-append-to-body="false"
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>

示例代码下载

可以复制以上代码运行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。

作者：代码123
原文链接：http://www.getcode123.com/how-to-show-select-component-fullscreen
版权声明：转载请附上原文链接