关于vxe-select的疑问

Question

vue3, vxe-select组件使用中，有一个需求，需要限制下拉框高度，滚动条正常出现，我查了官方文档，尝试用了popup-class-name属性，但是没有用，该怎么才能限制vxe-select下拉框的高度？

<vxe-form-item
                  title="推送人员"
                  field="username"
                  class="form-item"
                  style="flex:1"
              >
                <template #default>
                  <vxe-select placement="bottom"
                              multiple
                              style="width: 100%"
                              popup-class-name="custom-select"
                              class-name="custom-select"
                              v-model="formData.username"
                              :options="userOptions">
                  </vxe-select>
                </template>
              </vxe-form-item>

:deep(.custom-select) {
  z-index: 1999;
  max-height: 100px !important;
  overflow-y: auto !important;
}

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

在使用 vxe-select 组件时，如果希望限制下拉框的高度并让滚动条正常显示，可以通过自定义样式来实现。你已经尝试了 popup-class-name 和 class-name 属性，但可能由于样式作用域或选择器不准确导致未生效。

---

✅ 问题分析

1. popup-class-name="custom-select" 是用于给下拉弹窗添加类名，应该能生效。
2. 你在 CSS 中使用了 .custom-select，但可能因为 CSS 作用域（如使用了 scoped）或 选择器优先级不足 导致样式未被应用。
3. 需要确保样式能够穿透组件的封装，正确作用于下拉菜单。

---

✅ 解决方案

1. 确保样式可以穿透组件作用域

如果你使用的是 Vue 3 的 <style scoped>，需要使用 :deep() 或 ::v-deep 来穿透作用域：

:deep(.custom-select) {
  max-height: 100px !important;
  overflow-y: auto !important;
}

注意： 如果你使用的是 scoped 样式，必须加上 :deep() 才能修改子组件样式。

---

2. 检查是否设置了正确的类名

确认 vxe-select 上的 popup-class-name 和 class-name 是否一致，并且没有拼写错误：

<vxe-select
  placement="bottom"
  multiple
  style="width: 100%"
  popup-class-name="custom-select"
  class-name="custom-select"
  v-model="formData.username"
  :options="userOptions"
>
</vxe-select>

---

3. 使用更精确的选择器定位下拉菜单

有时候，vxe-select 的下拉菜单是动态生成的，可能不是直接嵌套在 custom-select 类中。你可以通过浏览器开发者工具检查元素，找到实际的 DOM 结构，然后编写更精确的 CSS。

例如，假设下拉菜单的实际类名为 .vxe-select__dropdown，你可以这样写：

:deep(.custom-select .vxe-select__dropdown) {
  max-height: 100px !important;
  overflow-y: auto !important;
}

---

4. 修改代码示例（完整）

<template>
  <vxe-form-item
    title="推送人员"
    field="username"
    class="form-item"
    style="flex:1"
  >
    <template #default>
      <vxe-select
        placement="bottom"
        multiple
        style="width: 100%"
        popup-class-name="custom-select"
        class-name="custom-select"
        v-model="formData.username"
        :options="userOptions"
      ></vxe-select>
    </template>
  </vxe-form-item>
</template>

<style scoped>
:deep(.custom-select) {
  max-height: 100px !important;
  overflow-y: auto !important;
}
</style>

---

✅ 总结

| 步骤 | 描述 | |------|------| | 1 | 使用 :deep() 穿透组件样式作用域 | | 2 | 确保 popup-class-name 和 class-name 一致 | | 3 | 检查下拉菜单的实际类名，使用更精确的选择器 | | 4 | 设置 max-height 和 overflow-y: auto 控制高度和滚动 |

---

✅ 最终效果

设置完成后，下拉框将被限制为 100px 高度，当内容超出时会显示滚动条，满足你的需求。