[英]Vuetify v0.17.6: How to get the autocomplete text inside v-select
[英]How to wrap text inside multiple v-select in vuetify?
我有一个 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;
}
正如您所注意到的,它接受多个值。 它还设置了一定的宽度。 问题是,当我从这个组件中选择太多选项时,它会增加它的高度。 我如何包装选择中显示的文本,而不是放大它? 谢谢你的帮助。
我相信我们没有一种简单的方法来包装显示的文本然后添加省略号或添加overflow: hidden
。
但是,如果即使有多个选择,您也想保持<v-select/>
的高度,您可能希望改用此实现。
基本上,您将显示最少数量的选择,然后指定您将拥有的剩余选择数量。 您将在此实现中使用<v-select/>
的selection
槽。
<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 }
]
})
这是codeandbox 上的示例演示。
当多个选择的内容很大时,高度总是扩展。 最佳解决方案是显示所选项目的计数,因为您始终可以通过再次单击选择来取消选择。
您可以修改选择部分如下。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.