Vue3迁移后Vuetify 3 v-select无法显示全部国家选项

问题分析 #

从你的描述和代码来看，核心问题出在Vuetify 3的虚拟滚动机制以及代码中的细节错误：

1. 虚拟滚动适配偏差：Vuetify 3的v-select默认启用虚拟滚动，当你自定义列表项模板时，组件默认的项高度计算和实际自定义项高度不匹配，导致下拉容器提前被填满，仅渲染了前67个选项。
2. 拼写错误干扰功能：代码中multiple="mulitple"是拼写错误，正确写法应为multiple，这个错误可能干扰组件的多选逻辑，间接影响下拉列表的渲染行为。
3. 模板绑定冗余：自定义模板中使用item.props.title和item.value，其实可以直接用item.name和item.code，更贴合你的数据结构，避免潜在的绑定异常。

修复方案 #

1. 修正拼写错误

将multiple="mulitple"改为：

multiple

或multiple="multiple"，确保多选功能正常触发。

2. 配置虚拟滚动的项高度

给v-select添加virtual-scroll-props，手动指定自定义项的高度，让虚拟滚动能正确计算可渲染的条目数量：

<v-select 
  density="compact" 
  variant="outlined" 
  :label="$t(additionalCitizenshipQuestion.label)"
  :items="additionalCitizenshipQuestion.countries" 
  v-model="additionalCitizenship" 
  item-value="code" 
  item-title="name"
  multiple
  :virtual-scroll-props="{ itemSize: 48 }" <!-- 根据你的项实际高度调整，比如48px -->
>
  <!-- 自定义item模板内容不变 -->
</v-select>

你可以根据.country-dropdown-list的实际高度调整itemSize的值，确保和真实高度一致，这样虚拟滚动就能正确加载所有200个国家选项。

3. （可选）临时禁用虚拟滚动

如果不需要虚拟滚动，也可以直接关闭它，强制渲染所有选项：

<v-select 
  <!-- 其他属性保持不变 -->
  :virtual-scroll="false"
>
</v-select>

注：200个选项数量不大，关闭虚拟滚动不会有明显性能问题，但如果未来选项数量增加，还是建议保留虚拟滚动。

4. 优化模板绑定

将自定义模板中的绑定修正为更直接的写法，避免潜在问题：

<v-checkbox v-model="additionalCitizenship" :value="item.code" style="height: 40px;"></v-checkbox>
<!-- ... -->
<v-list-item-title>
  {{ item.name }}
</v-list-item-title>

总结 #

Vuetify 3的虚拟滚动逻辑和Vue 2版本的Vuetify存在差异，自定义列表项时必须保证虚拟滚动的itemSize和实际项高度匹配，否则会出现渲染不全的情况。同时修正代码中的拼写错误和绑定问题，就能解决你的问题。

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