如何让Vuetify v-autocomplete多选仅显示选中项总数？

可以通过Vuetify提供的selection插槽完全自定义选中内容的展示逻辑，轻松实现只显示选中项总数的需求。

Vuetify 3 实现示例 #

<template>
  <v-autocomplete
    v-model="selectedItems"
    :items="items"
    multiple
    label="选择项目"
  >
    <!-- 重写选中项展示逻辑 -->
    <template v-slot:selection="{ selected }">
      <span v-if="selected.length > 0">已选中{{ selected.length }}项</span>
      <span v-else>请选择项目</span>
    </template>
  </v-autocomplete>
</template>

<script setup>
import { ref } from 'vue'

// 模拟选项数据
const items = ref([
  '项目A', '项目B', '项目C', '项目D', '项目E'
])
// 绑定选中项
const selectedItems = ref([])
</script>

Vuetify 2 兼容写法 #

如果使用的是Vuetify 2，selection插槽的参数名称为items，调整一下即可：

<template>
  <v-autocomplete
    v-model="selectedItems"
    :items="items"
    multiple
    label="选择项目"
  >
    <template v-slot:selection="{ items }">
      <span v-if="items.length > 0">已选中{{ items.length }}项</span>
      <span v-else>请选择项目</span>
    </template>
  </v-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目A', '项目B', '项目C', '项目D', '项目E'],
      selectedItems: []
    }
  }
}
</script>

关键说明 #

• selection插槽会覆盖组件默认的选中项展示逻辑，完全由你控制渲染内容
• 可以根据需求调整空状态提示文本（比如留空或显示其他提示）
• 选中项的绑定逻辑不受影响，依然通过v-model正常获取选中数据

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