i have a v-select component as shown below:
<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
.
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.
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
...
>
<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 .
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.