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

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

标签： javascriptcssvue.jsvuetify.js

Answer 1

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

但是，如果您想在<v-select/>有多个选择的情况下保持 's 高度，您可能需要改用此实现。

基本上，您将显示最少数量的选择，然后指定您将拥有多少剩余选择。您将为此实现使用 的selection插槽。<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>

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 }
  ]
})

这是代码和框的示例演示。