2 回答

TA贡献1836条经验 获得超4个赞
我相信我们没有一种简单的方法来包装显示的文本然后添加省略号或添加overflow: hidden.
但是,如果您希望<v-select/>在有多个选择的情况下保持 的高度,则可能需要改用此实现。
基本上,您将显示最少数量的选择,然后指定剩余的选择数量。您将为此实现使用selection插槽。<v-select/>
<v-select
...
>
<template v-slot:selection="{ item, index }">
<span v-if="index < maxDisplay">{{ item.label }} </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 }
]
})
https://i.stack.imgur.com/dd4AH.gif

TA贡献1864条经验 获得超6个赞
当多个选定的内容很大时,高度总是扩大。最佳解决方案是显示所选项目的数量,因为您始终可以通过再次单击选择来取消选择。
您可以如下修改选择部分。
<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>
添加回答
举报