为了账号安全,请及时绑定邮箱和手机立即绑定

如何在 vuetify 中将文本包装在多个 v-select 中?

如何在 vuetify 中将文本包装在多个 v-select 中?

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函数

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 }} &nbsp;</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条经验 获得超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>


查看完整回答
反对 回复 2023-02-24
  • 2 回答
  • 0 关注
  • 117 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号