Как разбить на части подразделы свойства массива в Vue.js? - PullRequest
Новая
       20

Как разбить на части подразделы свойства массива в Vue.js?

0 голосов
/ 06 мая 2018

При отображении списка данных можно выполнять итерацию по элементам, используя v-for. У меня есть некоторые элементы управления фильтрами, которые увеличивают или уменьшают количество видимых элементов (размер, тип, имя и тому подобное).

Независимо от этого, я хотел бы ограничить количество, видимое на странице, скажем, до 10 пунктов.

Другими словами, если фильтр скрывает 50 из 100 элементов результатов (которые все еще хранятся в Vuex), я все еще хочу иметь возможность разбивать страницы на 5 страниц (только 10 одновременно).

Есть несколько плагинов , таких как этот , которые, кажется, помогают с этим.

Однако я хотел бы попытаться сделать это вручную, чтобы понять, как это делается, хотя я немного озадачен.

Ответы [ 2 ]

0 голосов
/ 06 мая 2018

Поскольку у вас на борту Vuex, получатель кажется самым простым. 

export const getters = {
  pagedItems: state => {
    return pageNo => {
      const pageSize = state.pageSize || 10
      const items = state.items || []
      return items.slice(pageNo * pageSize, pageSize) 
    }
  }
}

Значения по умолчанию (например, state.items || []) предназначены для остановки ошибок вычисления до завершения начальной загрузки.

Используйте его для компонента в вычисляемом свойстве, которое сделает его реактивным при изменении pageNo, 

computed: {
  pagedItems() {
    return this.$store.getters['pagedItems'](this.pageNo)
  },
},

Мне только что пришло в голову, что если вы фильтруете, вы, вероятно, захотите применить это перед нумерацией страниц, в противном случае отображение может быть непостоянным по размеру (например, фильтры страницы 1 до 4 пунктов, страницы от 2 до 6 пунктов).

Зависит от вашего точного фильтра, должно быть легко добавить геттер для filteredItems и использовать его в качестве источника для pagedItems.

0 голосов
/ 06 мая 2018

ну, я бы просто разделил количество элементов на количество данных, которые я хочу отобразить на странице, с помощью оператора rest и создал бы количество страниц + 1, конечно, с некоторыми проверками для очистки данных и т. Д.

Представьте, что вы получаете объект, который содержит списки, эти списки представляют все массивы с вашими данными, каждый массив представляет собой строку.

Просто получите длину, разделите ее с помощью оператора модуля и добавьте еще один, в вашем случае, если у вас есть 52 элемента и вы хотите иметь 10 на страницу:

52% 10 = 2 52/10 = 5

вам нужно 5 страниц + 1 для 2 пунктов.

так что я бы сделал что-то вроде этого: 

const NUMBER_ITEMS_PER_PAGE = 10;

const numberItems = list.length;
const pages = numberItems / NUMBER_ITEMS_PER_PAGE

if(numberItems % NUMBER_ITEMS_PER_PAGE > 0) {
  pages++;
}

function buildPages(numberPages) {
  const pageObj = {}
  for(var i = 0; i < pages; i++) {
    pageObj.page[i+1]
    const arr = []
    for(var j = 0; j < (NUMBER_ITEMS_PER_PAGE) * (i + 1); j++) {
      arr.push(lists[i]) 
    }
   pageObj.page[i+1] = arr;
  }
}

Конечно, это только одно из возможных решений, но я думаю, что это может позволить вам начать каким-то образом, код только для того, чтобы помочь. удачи

...