【问题标题】:v-select vuetify max elements countv-select vuetify 最大元素数
【发布时间】:2020-05-03 12:09:13
【问题描述】:

似乎v-select 仅显示数组中的 20 个元素,即使数组 (persons) 有 22 个元素,但如果我使用自动完成功能,我可以在列表中看到这 2 个失踪人员,因此在我开始之前它们实际上不会显示寻找使用自动完成。代码如下:

<v-select
  :items="persons"
  v-model="model.persons"
  label="Persons:"
  item-text="name"
  item-value="id"
  multiple
  chips
  max-height="auto"
  autocomplete
>
  <template slot="selection" slot-scope="data">
    <v-chip
      :selected="data.selected"
      :key="JSON.stringify(data.item)"
      close
      class="chip--select-multi"
      @input="data.parent.selectItem(data.item)"
    >
       {{ data.item.name }}
    </v-chip>
  </template>
  <template slot="item" slot-scope="data">
    <template v-if="typeof data.item !== 'object'">
      <v-list-tile-content v-text="data.item"></v-list-tile-content>
    </template>
    <template v-else>                       
      <v-list-tile-content>
        <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
      </v-list-tile-content>
    </template>
  </template>
</v-select>

是否有任何v-select 选项可用于增加该数字?

【问题讨论】:

  • 您的v-select 将显示所有 22 个条目。您必须向下滚动才能查看所有条目。在Vuetify Github 上有一个问题。似乎到目前为止还没有很好的解决方案来禁用此行为。
  • 肯定和问题。我有一个 v-select 有 50 个项目,它只显示 20
  • 我遇到了同样的问题。通过将 Vuetify 升级到最新版本(当前为 2.2.28)修复
  • 是否有设置显示更多元素以便用户不必滚动列表?我的用户没有注意到 v-select 是可滚动的。所以他们看不到隐藏的除非滚动的元素。

标签: vue.js vuetify.js v-select


【解决方案1】:

menu-props="auto" 属性传递给v-select 可以解决问题。

<v-select
  ...
  menu-props="auto"
>

【讨论】:

    猜你喜欢
    • 2019-08-01
    • 2020-07-11
    • 1970-01-01
    • 2019-09-27
    • 2020-08-16
    • 1970-01-01
    • 1970-01-01
    • 2020-10-29
    • 2020-02-10
    相关资源
    最近更新 更多