如何在vuetify中的多个v-select中包装文字？

Question

我有一个v-select组件，如下所示：

<v-select
  class="area-select"
  v-model="selectedAreas"
  multiple
  :items="areas"
  item-text="label"
  item-value="key"
  label="Select" />

...

.area-select {
  margin-left: 10px;
  margin-right: 10px;
  width: 280px;
}

您已经注意到，它接受多个值。它还设置了一定的宽度。问题是，当我从该组件中选择太多选项时，它会增加其高度。我如何包装select中显示的文本，而不是放大文本？感谢您的帮助。

Answer 1

我相信我们没有一种简单的方法来包装显示的文本，然后添加省略号或添加overflow: hidden。

但是，如果即使要选择多个选项，也要保持<v-select/>的高度，则可能要改用implementation。

基本上，您将显示最少数量的选择，然后指定剩余的选择数量。您将使用selection的{​​{1}}插槽进行此实现。

<v-select/>

<v-select
  ...
>

  <template v-slot:selection="{ item, index }">
    <span v-if="index < maxDisplay">{{ item.label }} &nbsp;</span>
    <span
      v-if="index === maxDisplay"
      class="grey--text caption"
    >(+{{ selectedAreas.length - maxDisplay }} areas)</span>
  </template>

</v-select>

这里是codesandbox处的示例演示。

Answer 2

当多个选定内容很大时，高度始终会扩大。 最好的解决方案是显示选定项目的数量，因为您始终可以通过再次单击“选择”来取消选择。

您可以如下修改选择部分。

 <v-select
        class="area-select"
        v-model="selectedAreas"
        multiple
        :items="areas"
        item-text="label"
        item-value="key"
        label="Select">
              <template v-slot:selection="{ index }">
                 <span v-if="index === 0"> Area ({{ selectedAreas.length }})</span>
              </template>
 </v-select>