Vuetify多选Autocomplete自定义选中项显示实现求助

要实现自定义多选选中项的显示逻辑（如全选时只展示第一个项+剩余数量提示），你可以通过结合v-slot:selection自定义选中项渲染，同时保留原有的v-slot:prepend-item全选功能，具体实现如下：

1. 修改模板结构 #

在原有的<v-autocomplete>标签内添加v-slot:selection插槽，控制选中项的展示逻辑：

<v-list-item
  two-line
  inactive
  :ripple="false"
  dense
  style="margin-top: 15px"
>
  <v-autocomplete
    v-model="valuesConnection"
    :items="connectionArray"
    label="Relationship"
    :search-input.sync="searchConnection"
    class="settingsLstItm"
    filled
    dark
    append-icon="mdi-chevron-down"
    clear-icon="mdi-close-circle"
    :background-color="backgroundDark3"
    dense
    clearable
    multiple
    :item-color="yellow"
    item-text="label" <!-- 注意：替换成你实际的item文本字段，比如name/label，原代码写法有误 -->
    :loading="true"
    :menu-props="{ dark: true, maxWidth: 280 }"
  >
    <!-- 保留原有的全选前置项 -->
    <template v-slot:prepend-item>
      <v-list-item
        ripple
        @mousedown.prevent
        @click="toggle"
      >
        <v-list-item-action>
          <v-icon :color="valuesConnection.length > 0 ? 'var(--yellow)' : ''">
            {{ icon }}
          </v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>
            SELECT ALL
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item> 
      <v-divider class="mt-2"></v-divider>
    </template>

    <!-- 添加自定义选中项渲染插槽 -->
    <template v-slot:selection="{ item, index, selected, select }">
      <!-- 仅渲染第一个选中项 -->
      <template v-if="index === 0">
        <v-chip
          small
          :selected="selected"
          @click="select"
          color="yellow"
          text-color="black"
        >
          {{ item.label }} <!-- 同样替换为你实际的item文本字段 -->
          <!-- 选中数量>1时，显示剩余数量提示 -->
          <span v-if="valuesConnection.length > 1" class="ml-2">
            ({{ valuesConnection.length - 1 }}个其他项)
          </span>
        </v-chip>
      </template>
      <!-- 隐藏其余选中项的默认渲染 -->
      <template v-else></template>
    </template>
  </v-autocomplete>
</v-list-item>

2. 完善脚本逻辑 #

在组件的<script>部分实现全选/取消全选的toggle方法，以及控制全选图标的计算属性：

export default {
  data() {
    return {
      valuesConnection: [],
      connectionArray: [], // 从数据库获取的选项数组
      searchConnection: '',
      backgroundDark3: '#你的深色背景值'
    }
  },
  computed: {
    // 控制全选图标切换
    icon() {
      return this.valuesConnection.length === this.connectionArray.length 
        ? 'mdi-check-box' 
        : 'mdi-check-box-outline-blank'
    }
  },
  methods: {
    // 全选/取消全选逻辑
    toggle() {
      if (this.valuesConnection.length === this.connectionArray.length) {
        // 已全选，清空选中项
        this.valuesConnection = []
      } else {
        // 未全选，选中所有选项
        this.valuesConnection = [...this.connectionArray]
      }
    }
  },
  // 示例：从数据库加载选项的逻辑
  async mounted() {
    // const res = await api.getConnections()
    // this.connectionArray = res.data
  }
}

关键说明 #

• 修正item-text属性：原代码中item-text="color:var(--yellow)"是错误用法，该属性需要指定connectionArray中每个对象的文本字段（如label/name），确保选项能正常显示。
• 选中项控制：通过v-slot:selection的index判断，只渲染第一个选中项，同时附加剩余数量提示；其余选中项通过空模板隐藏，避免默认的多芯片展示。
• 全选逻辑联动：toggle方法通过对比选中数量和总选项数量，实现全选/取消全选的切换，配合icon计算属性更新图标状态。

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