v-autocomplete自定义item模板后下拉列表无法显示全部1-100项

问题原因 #

v-autocomplete默认启用虚拟滚动机制，用于优化大量数据的渲染性能。当自定义#item模板并使用v-list-item这类自带固定高度的组件时，Vuetify无法自动识别并计算列表项的高度，导致虚拟滚动容器的可视区域计算错误，只能加载并显示部分条目。

解决方案 #

以下三种方法可按需选择：

方法1：禁用虚拟滚动 #

针对数据量不大的场景（如本次的100条数据），直接禁用虚拟滚动即可让所有条目正常显示：

<template>
  <v-app>
    <v-container>
      <v-autocomplete
        label="Autocomplete"
        :items="CountList"
        variant="outlined"
        virtual-scroll="false"
      >
        <template #item="{ item }">
          <v-list-item>{{ item.raw }}</v-list-item>
        </template>
      </v-autocomplete>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const CountList = ref([])
for (let i = 1; i <= 100; i++) {
  CountList.value.push(i)
}
</script>

方法2：手动指定item高度 #

若需要保留虚拟滚动的性能优化，可手动指定列表项的高度（v-list-item默认高度为48px）：

<template>
  <v-app>
    <v-container>
      <v-autocomplete
        label="Autocomplete"
        :items="CountList"
        variant="outlined"
        :item-height="48"
      >
        <template #item="{ item }">
          <v-list-item>{{ item.raw }}</v-list-item>
        </template>
      </v-autocomplete>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const CountList = ref([])
for (let i = 1; i <= 100; i++) {
  CountList.value.push(i)
}
</script>

方法3：简化自定义模板（可选） #

如果不需要v-list-item的样式，改用更简单的元素可让组件自动计算高度：

<template>
  <v-app>
    <v-container>
      <v-autocomplete
        label="Autocomplete"
        :items="CountList"
        variant="outlined"
      >
        <template #item="{ item }">
          <div class="pa-3">{{ item.raw }}</div>
        </template>
      </v-autocomplete>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const CountList = ref([])
for (let i = 1; i <= 100; i++) {
  CountList.value.push(i)
}
</script>

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