vuetify js выбирается с помощью 'hide-selected = true', показывая только первые 20 элементов - PullRequest
Новая
       22

vuetify js выбирается с помощью 'hide-selected = true', показывая только первые 20 элементов

2 голосов
/ 05 марта 2020

vuetify выбирает , показывая только первые 20 элементов из списка, если мы установили hide-selected = true, 

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

см. Полный код на коде здесь

Ответы [ 2 ]

3 голосов
/ 06 марта 2020

Вы также можете увеличить lastItem свойство VSelect, которое контролирует длину виртуального списка и изначально установлено на 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>

Изменить значение lastItem в mounted()

mounted() {
  this.$refs.select.lastItem = 200;
},
2 голосов
/ 06 марта 2020

Возможно, это ошибка в vuetify, и я вижу, что вы уже открыли проблему на github :)

Я думаю, что эта ошибка связана с внутренними virtualizedItems и computedItems свойства в vuetify VS выберите класс .

Computeditems - это массив элементов, которые по умолчанию всегда обрезаются до 20 элементов, а затем добавляются еще 20 элементов, например, при прокрутке окна выбора. В настоящее время (по крайней мере, в vuetify 2.2.15) нет способа манипулировать количеством добавленных элементов.

Существует быстрое решение вашей проблемы - просто добавьте menuProps="auto" к вашему v- Выбрать. Это предотвращает обрезку computedItems. Но имейте в виду, что это может привести к незначительным визуальным изменениям в компоненте v-select. Кроме того, все ваших товаров будут немедленно загружены в компонент v-select, и открытие компонента может занять больше времени, чем обычно.

...