element-ui select 下拉框位置錯亂--解決

element-ui select 下拉框位置錯亂

由於使用 element-ui 的 select 組件時，下拉框的位置錯亂了。

開始查找問題

通過各種問題查找，發現是 css 問題

css

body {
  position: relative;
}
#app {
  margin-top: 70px;
}

html

<div id="app">
  <el-select v-model="value" placeholder="請選擇">
    <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.name">
    </el-option>
  </el-select>
</div> 

最初是使用 popper-append-to-body 來解決，但是由於父元素使用了 overflow: auto (避免改變布局結構)，而導致下拉框在父元素內部。

總結

通過上面的方式，有兩種方式進行解決

• 父元素盡可能不使用 margin-top 換為 padding-top
• 使用 popper-append-to-body 時，父元素不要使用 overflow: auto
• demo展示

通過查找element的源碼時，發現是其引用 popper.js 的緣故