element中关于下拉时位置偏移

• 👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟
• 🌈擅长领域：前端开发
• 🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
• 🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

最近做项目时发现element的好多组件在存在下拉时会产生偏移，例如select，dropdown，datepicker，究其原因主要是在页面存在滚动条时，会出现偏移的情况。结合element源码popper.js，当屏幕变化或者滚动时，会动态计算元素的定位位置信息，从而导致位置偏移。

1.存在于非弹框中

只需要设置它们不插入在body中:popper-append-to-body="false"。

2.存在于弹框中

2.1设置全局的样式

全局样式里重写el-select-dropdown，并在所有的select中加上:popper-append-to-body="false"

::v-deep .el-select-dropdown {
  position: absolute !important;
  top: 35px !important;
  left: 0px !important;
}

<el-select :popper-append-to-body="false">
  <el-option>南京</el-option>
</el-select>

2.2局部修改

设置一个全局样式popper-select，再在select上加上:popper-append-to-body="false"。

.popper-select {
  position: absolute !important;
  top: 35px !important;
  left: 0px !important;
}

<el-select :popper-append-to-body="false" popper-class="popper-select">
  <el-option>南京</el-option>
</el-select>

3.总结

其实总的方案就是不再动态计算元素的位置，也不让它们插入到body中，能够找到后重写样式，并且让下拉框绝对定位到父元素上。
dropdown的下拉框也是同样的道理，组件中使用popper.js的都可以使用appendToBody属性。

<el-dropdown trigger="click">
  <el-button type="primary" size="small">城市</el-button>
  <el-dropdown-menu
    slot="dropdown"
    :append-to-body="false"
    class="popper-dropdown"
  >
    <el-dropdown-item>南京</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

 <!-- 根据情况二选一 -->
.popper-dropdown {
  min-width: 120px;
  position: absolute !important;
  top: 35px !important;
  left: -45px !important;
}
::v-deep .el-dropdown-menu {
  min-width: 120px;
  position: absolute !important;
  top: 35px !important;
  left: -45px !important;
}

• 加v号zyl751023293，第一时间在浏览文章中出现不明白之处，进行交流，共同进步！！！
• 如果这篇文章对你有用，记得留个脚印再走哟~