Vue3选择组件下拉异常：菜单向上展开且溢出显示不全求助

问题1：下拉菜单向上展开而非向下 #

当前.select-droplist使用bottom: 100%将菜单定位在按钮上方，只需修改定位属性即可实现向下展开，同时添加少量margin避免菜单与按钮边框重叠：

.select-droplist {
  width: 100%;
  max-height: 300px;
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 4px;
  position: absolute;
  /* 替换bottom为top，让菜单从按钮下方展开 */
  top: 100%;
  left: 0px;
  /* 添加margin消除边框重叠 */
  margin-top: 4px;
  overflow-y: auto;
  z-index: 500;
}

问题2：部分按钮无法显示全部下拉选项 #

该问题通常是组件的父级容器设置了overflow: hidden，导致下拉菜单被截断，可通过以下两种方式解决：

方案A：调整父级容器样式 #

若有权限修改父级容器，直接移除overflow: hidden或改为overflow: visible。

方案B：修改下拉菜单定位与层级 #

若无法修改父级，可提升下拉菜单的层级，或改为fixed定位脱离父级文档流（需配合JS动态计算位置）：

.select-droplist {
  /* 保留原有样式，修改以下内容 */
  z-index: 9999; /* 提升层级避免被其他元素覆盖 */
  /* 若父级仍截断，可改为fixed定位 */
  /* position: fixed; */
}

额外优化：搜索匹配逻辑修复 #

当前filteredOptions的匹配逻辑存在大小写敏感、空字符串匹配异常的问题，修改为不区分大小写的模糊匹配：

const filteredOptions = computed(() => {
  if (!searchQuery.value) return props.options;
  const query = searchQuery.value.toLowerCase();
  return props.options?.filter(option => option.name.toLowerCase().includes(query));
});

修改后的完整样式代码 #

<style>
  .select-wrapper {
      width: 100%;
      height: 30px;
      background-color: white;
      border: 1px solid lightgray;
      border-radius: 4px;
      position: relative;
  }
    
  .select-button {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 46px;
      place-items: center;
      padding-left: 16px;
      cursor: pointer;
  }

  .select-button-text {
      width: 100%;
      text-align: left;
  }

  .selected-option {
    color: blue;
    font-weight: bold;
  }

  .select-droplist {
    width: 100%;
    max-height: 300px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 4px;
    position: absolute;
    top: 100%;
    left: 0px;
    margin-top: 4px;
    overflow-y: auto;
    z-index: 9999;
  }

  .search-option {
    width: 100%;
    height: 46px;
    padding: 0px 16px;
    border: none;
    border-bottom: 1px solid rgba(0 0 0 / 0.05) !important;
    outline: none;
    position: sticky;
    top: 0px;
    background-color: white;
  }

  .select-option {
    width: 100%;
    height: 46px;
    display: flex !important;
    align-items: center;
    padding: 0px 16px;
    border: none;
    border-bottom: 1px solid rgba(0 0 0 / 0.05);
  }

  .select-option:hover {
    background-color: rgba(0 0 0 / 0.05);
  }

  .select-option:nth-last-child(1) {
    border-bottom: none;
  }
</style>

内容的提问来源于stack exchange，提问作者fico