[英]How to wrap text inside multiple v-select in vuetify?
i have a v-select component as shown below:我有一个 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;
}
As you have noticed it accepts multiple values.正如您所注意到的,它接受多个值。 It also has set certain width.
它还设置了一定的宽度。 The problem is, when i select too many options from this component, it increases it's height.
问题是,当我从这个组件中选择太多选项时,它会增加它的高度。 How could i wrap text shown in select, instead of enlarging it?
我如何包装选择中显示的文本,而不是放大它? Thanks for any help.
谢谢你的帮助。
I believe there isn't an easy way for us to wrap the displayed text then adding an ellipsis or adding overflow: hidden
.我相信我们没有一种简单的方法来包装显示的文本然后添加省略号或添加
overflow: hidden
。
But , if you want to maintain the <v-select/>
's height even if there are more than one selection, you might want to use this implementation instead.但是,如果即使有多个选择,您也想保持
<v-select/>
的高度,您可能希望改用此实现。
Basically, you'll show a minimum number of selections, then specify how many remaining selections you'll have.基本上,您将显示最少数量的选择,然后指定您将拥有的剩余选择数量。 You will use the
selection
slot of <v-select/>
for this implementation.您将在此实现中使用
<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 }
]
})
Here is a sample demo at codesandbox .这是codeandbox 上的示例演示。
Height always expand when multiple selected content is large.当多个选择的内容很大时,高度总是扩展。 Best solution is to Show counts of selected items as you can always de-select by clicking select again.
最佳解决方案是显示所选项目的计数,因为您始终可以通过再次单击选择来取消选择。
You can modify select portion as below.您可以修改选择部分如下。
<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.