javascript - vuetifyjs 选择 'hide-selected=true' 仅显示前 20 个项目

Question

vuetify selects如果我们设置 hide-selected=true，则只显示列表中的前 20 个项目，

  <v-select
        v-bind:items="test_data"
        v-model="test_modal"
        label="Reader permissions"
        multiple
        chips
        deletable-chips
        :counter="test_data.length"
         hide-selected

  ></v-select>

请参阅 codepen here 上的完整代码

Answer 1

可能这是 vuetify 中的一个错误，我看到你已经是 opened issue on github :)

我认为这个错误与内部 有关虚拟化项目 和 计算项目 vuetify 的 VSelect class 中的属性.

Computeditems 是一个项目数组，默认情况下总是裁剪为 20 个项目，然后再添加 20 个项目，例如，当您滚动选择框时。目前(至少在 vuetify 2.2.15 中)无法操作添加项目的数量。

有一个快速修复你的问题 - 只需添加menuProps="auto"到你的 v-select。它可以防止computedItems 裁剪。但请记住，这可能会导致 v-select 组件的细微视觉变化。此外，全部 您的项目将立即加载到 v-select 组件中，并且打开该组件可能需要比平时更长的时间。