Element-Plus select选择器-下拉组件错位bug（有高度滚动时）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-Plus select选择器-下拉组件错位bug（有高度滚动时）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. bug重现

由于项目不便展示，因此在官网复现bug
https://element-plus.org/zh-CN/component/select.html#基础用法

Element-Plus select选择器-下拉组件错位bug（有高度滚动时）,web-其他,web项目开发,web-vue,前端,elementui

Element-Plus select选择器-下拉组件错位bug（有高度滚动时）,web-其他,web项目开发,web-vue,前端,elementui 文章来源地址https://www.toymoban.com/news/detail-520240.html

2. 调试

源码调试时发现下拉菜单是直接放在body 元素里，这时候希望它不要直接放在body里，查阅文档看到这两个属性：
但是添加了上面的属性后，出现了新的问题，要么是不生效，要么是下拉菜单不显示了，但是这个时候通过调试代码已经发现下拉菜单不是直接放在body里了，只是展示有问题；

3. 解决

popper-append-to-body 属性被官方标注为废弃，因此在这里使用 :teleported=“false”
这里只提供解决方法，实际项目中需要封装一个全局组件，并以该全局组件代替 select选择器，组件中通过添加 v-bind=“$attrs” , 可以更简便的在使用时传递 element-plus 需要的属性.
注意：
- 在vue3中，跨组件传递属性和函数只用 v-bind=“$attrs” 即可；
- 在vue2中，跨组件传递属性使用 v-bind=“$attrs” ，跨组件传递函数使用 v-on=”$listeners” 。

<template>
  <el-select
    style="position: relative"
    :teleported="false"
    @visible-change="
      (val) => {
        // do something
        controlSelectMenusFn(val);
      }
    "
  >
    <el-option ...></el-option>
  </el-select>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const controlSelectMenus = ref('none');
  const controlSelectMenusFn = (val) => {
    if (val) {
      controlSelectMenus.value = 'line';
    } else {
      controlSelectMenus.value = 'none';
    }
  };
</script>
<style lang="less" scoped>
  ::v-deep(.el-popper.is-pure.is-light.el-select__popper) {
    display: v-bind(controlSelectMenus) !important;
  }
</style>