Vuetify：在v-select选择槽内使用v-chip-group

Question

我试图在v-chip-group v-select中添加v-slot=selection，但是失败了。

由于设计要求，我必须在多选中保留一些占位符文本，但组件的宽度是如此之大。我希望芯片像default v-chip-group这样的滚动界面向右溢出，但似乎无法一起工作。

目标

当前

如何获取代理BaseSelect组件，该组件基本上是v-select的默认样式的包装程序，可以用作v-chip-group？我还希望这些芯片能够与deletable-chips道具一起使用。

组件

            <BaseSelect
              multiple
              class="flex-0-1-30rem"
              localKey="breakdownBy"
              :items="localizedBreakdownList"
              :value="breakdowns"
              :placeholder="$t('select-breakdownBy-label')"
              @change="setBreakdowns"
            >
              <template v-slot:selection="{ item, select, index }">
                <span
                  v-if="index === 0"
                  class="text--uppercase"
                >{{ $t('select-breakdownBy-label') }}</span>
                <v-chip color="primary" class="text--white">{{ item.text }}</v-chip>
              </template>
            </BaseSelect>

BaseSelect组件

<template>
  <v-select
    hide-details
    solo
    dense
    :append-icon="mdiMenuDown"
    :items="items"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <!-- Passes scopedSlots to child -->
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>

    <!-- Default scopedSlots -->
    <template v-if="!hasScopedSlot('selection')" v-slot:selection="{ item }">
      <span
        :class="slotClasses"
      >{{ item.text || $t(`select-${localKey}-option-${item.value || item}`) || item }}</span>
    </template>

    <template v-if="!hasScopedSlot('item')" v-slot:item="{ item }">
      <span
        :class="slotClasses"
      >{{ item.text || $t(`select-${localKey}-option-${item.value || item}`) || item }}</span>
    </template>
  </v-select>
</template>