ant design Vue 3.0 select 组件使用虚拟滚动, 每一项含有 margin 导致内容显示不全

guowenwen

有木有大佬帮忙 ant design Vue 3.0 select 组件使用虚拟滚动, 每一项含有 margin 导致内容显示不全
实在想不到如何解决，请求各位大佬支援

以下是代码和问题展示图片:

[JavaScript] 纯文本查看 复制代码

<script setup lang='ts'>
import { ref } from "vue";
const value1 = ref('Y01')
</script>

<template>
  <div>
    <a-select ref="select" v-model:value="value1" style="width: 120px">
      <a-select-option value="Y01">01</a-select-option>
      <a-select-option value="Y02">02</a-select-option>
      <a-select-option value="Y03">03</a-select-option>
      <a-select-option value="Y04">04</a-select-option>
      <a-select-option value="Y05">05</a-select-option>
      <a-select-option value="Y06">06</a-select-option>
      <a-select-option value="Y07">07</a-select-option>
      <a-select-option value="Y08">08</a-select-option>
      <a-select-option value="Y09">09</a-select-option>
      <a-select-option value="Y10">10</a-select-option>
      <a-select-option value="Y11">11</a-select-option>
      <a-select-option value="Y12">12</a-select-option>
      <a-select-option value="Y13">13</a-select-option>
      <a-select-option value="Y14">14</a-select-option>
      <a-select-option value="Y15">15</a-select-option>
      <a-select-option value="Y16">16</a-select-option>
      <a-select-option value="Y17">17</a-select-option>
      <a-select-option value="Y18">18</a-select-option>
      <a-select-option value="Y19">19</a-select-option>
      <a-select-option value="Y20">20</a-select-option>
    </a-select>
  </div>
</template>

<style lang='less'>
.ant-select-dropdown {
  .ant-select-item {
    margin: 10px 0;
  }
}</style>

coolcalf

这个问题的原因是 ant-design-vue 的 Select 组件使用虚拟滚动,每一项默认带有 10px 的 margin-top 和 margin-bottom。
当内容较多时,这个 margin 会导致超出容器部分内容无法显示,产生显示不全的问题。
要解决这个问题,我们有两种常用方案:
1. 编辑 less 样式,修改或删除 select-item 的 margin:
less
.ant-select-dropdown {
  .ant-select-item {
    margin: 0;   // 修改或删除margin
  }
}
2. 使用 group-line-height 调整容器高度,显示完整内容:
html
<a-select ref="select" v-model:value="value1" style="width: 120px" :group-line-height="20">
  <!-- 选项列表 -->
</a-select>
给 group-line-height 传递较小的值,可以给选项容器预留更多空间,显示完整内容。
所以这个问题的解决方案是:
1. 修改样式,调整 select-item 的 margin
2. 使用 group-line-height 配置预留更多选项容器空间
这两个方法可以调整 select 下拉容器的高度和选项间距,使完整内容显示在可视范围内。

soyadokio

没遇到过这种问题。
我想有几个方向：
size设定大小
dropdownStyle设定下拉菜单的style
直接在<style scoped></style>里改写options的样式（这个方案经常用）
dropdownRender自己实现下option，甚至在下拉菜单里加个分页

soyadokio

coolcalf 发表于 2023-5-18 11:05
这个问题的原因是 ant-design-vue 的 Select 组件使用虚拟滚动,每一项默认带有 10px 的 margin-top 和 marg ...

老哥用的哪个版本，怎么注册的，我也想注册。

guowenwen

coolcalf 发表于 2023-5-18 11:05
这个问题的原因是 ant-design-vue 的 Select 组件使用虚拟滚动,每一项默认带有 10px 的 margin-top 和 marg ...

回复第一个方案，使用 margin 是为了让我的 每一项都有一个距离，这个无法删除
回复第二个方案，首先 group-line-height 是 a-select 组件自带的属性吗，我尝试过，发现并没有效果

guowenwen

soyadokio 发表于 2023-5-18 11:12
没遇到过这种问题。
我想有几个方向：
size设定大小

这个问题主要是 margin 在虚拟滚动中它是监听不到的，所以才导致一部分显示补全

steven026

这个组件好像不支持margin，你可以尝试下改line-height

guowenwen

steven026 发表于 2023-5-18 16:22
这个组件好像不支持margin，你可以尝试下改line-height

就是想用 margin 才用的呀, 想要每一项之间都有间距，但不能使用 border