首頁猿問如何在 vuetify...

如何在 vuetify 中將文本包裝在多個 v-select 中？

JavaScript

UYOU 2023-02-24 15:36:57

我有一個 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;}正如您所注意到的，它接受多個值。它還設置了一定的寬度。問題是，當我從這個組件中選擇太多選項時，它會增加它的高度。我如何包裝選擇中顯示的文本，而不是放大它？謝謝你的幫助。

查看完整描述

2 回答

HUH函數(shù)

TA貢獻1836條經(jīng)驗獲得超4個贊

我相信我們沒有一種簡單的方法來包裝顯示的文本然后添加省略號或添加overflow: hidden.

但是，如果您希望<v-select/>在有多個選擇的情況下保持的高度，則可能需要改用此實現(xiàn)。

基本上，您將顯示最少數(shù)量的選擇，然后指定剩余的選擇數(shù)量。您將為此實現(xiàn)使用selection插槽。<v-select/>

<v-select

...

>

<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

反對回復 2023-02-24

慕尼黑的夜晚無繁華

TA貢獻1864條經(jīng)驗獲得超6個贊

當多個選定的內(nèi)容很大時，高度總是擴大。最佳解決方案是顯示所選項目的數(shù)量，因為您始終可以通過再次單擊選擇來取消選擇。

您可以如下修改選擇部分。

<v-select

class="area-select"

v-model="selectedAreas"

multiple

:items="areas"

item-text="label"

item-value="key"

label="Select">

<span v-if="index === 0"> Area ({{ selectedAreas.length }})</span>

</template>

</v-select>

反對回復 2023-02-24

2 回答
0 關注
147 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何在 vuetify 中將文本包裝在多個 v-select 中？

如何在 vuetify 中將文本包裝在多個 v-select 中？

2 回答

添加回答

如何在 vuetify 中將文本包裝在多個 v-select 中？