如何在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;
}

正如您所注意到的，它接受多個值。 它還設置了一定的寬度。 問題是，當我從這個組件中選擇太多選項時，它會增加它的高度。 我如何包裝選擇中顯示的文本，而不是放大它？ 謝謝你的幫助。

Answer 1

我相信我們沒有一種簡單的方法來包裝顯示的文本然后添加省略號或添加overflow: hidden 。

但是，如果即使有多個選擇，您也想保持<v-select/>的高度，您可能希望改用此實現。

基本上，您將顯示最少數量的選擇，然后指定您將擁有的剩余選擇數量。 您將在此實現中使用<v-select/>的selection槽。

<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>

data: () => ({
  maxDisplay: 2, // how many selections will be displayed on `<v-select/>`
  selectedAreas: [{ label: "Area 51", key: 1 }],
  areas: [
    { label: "Area 51", key: 1 },
    { label: "Area 52", key: 2 },
    ...
    { label: "Area 59", key: 9 }
  ]
})

這是codeandbox 上的示例演示。

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>