vuetifyjs 选择 'hide-selected=true' 显示仅列出前 20 个项目答案

【问题标题】：vuetifyjs selects with 'hide-selected=true' show only listing first 20 itemsvuetifyjs 选择 'hide-selected=true' 显示仅列出前 20 个项目
【发布时间】：2020-03-05 15:22:06
【问题描述】：

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上查看完整代码

【问题讨论】：

请参阅v-autocomplete，items 可以是对象数组或字符串数组，但您的示例使用数字。
@RichardMatsen 如果我们使用字符串会发生同样的事情，

标签： javascript vue.js drop-down-menu vuetify.js

【解决方案1】：

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

我认为这个错误与 vuetify 的 VSelect class 中的内部 virtualizedItems 和 computedItems 属性有关。

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

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

【讨论】：

【解决方案2】：

也可以增加VSelect的lastItem属性，控制虚拟列表的长度，初始设置为20。

（注意，VSelect 的属性可能会因版本而异）

为选择添加一个引用

<v-select
    ref="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>

更改mounted()中lastItem的值

mounted() {
  this.$refs.select.lastItem = 200;
},

【讨论】：

是的，它确实适用于 vuetify@2.2.15 Codesandbox。