Vue.js에서 어레이 속성의 서브섹션 페이지 매기는 방법

Vue.js에서 어레이 속성의 서브섹션 페이지 매기는 방법

목록 데이터를 표시할 때 다음을 사용하여 항목을 반복할 수 있습니다.v-for보이는 항목(크기, 종류, 이름 등)의 수를 늘리거나 줄이는 필터 컨트롤이 있습니다.

그럼에도 불구하고, 저는 페이지에 보이는 양을 10개 정도로 제한하고 싶습니다.

즉, 필터가 결과 항목 100개 중 50개(Vuex에 저장되어 있음)를 숨기더라도 5페이지(한 번에 10페이지만)의 페이지 수를 매길 수 있습니다.

이와 같은 플러그인이 몇 개 있어 도움이 될 것 같습니다.

다만, 조금 곤란하지만, 수작업으로 실시해 보고 싶다고 생각하고 있습니다.

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 || [])는 초기 로드가 완료되기 전에 계산 오류를 중지합니다.

계산된 속성의 컴포넌트에 사용합니다.이것에 의해, 페이지 No가 변경되었을 때에, 무효가 됩니다.

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

---

필터링을 하고 있는 경우는, 페이지 번호 매기기 전에, 표시의 사이즈가 일정하지 않을 가능성이 있습니다(예를 들면, 1페이지에서 4항목, 2페이지에서 6항목).

정확한 필터에 따라 다르지만 getter를 쉽게 추가할 수 있습니다.filteredItems그리고 그것을 소스로 삼는다.pagedItems.

나머지 연산자와 함께 항목 수를 페이지당 표시하고 싶은 데이터 수로 나누고 페이지 수 + 1을 작성합니다.물론 데이터를 비우는 검증도 몇 가지 있습니다.

리스트가 포함된 오브젝트를 수신했을 경우, 이 리스트는 데이터와 함께 모든 어레이를 나타내며, 각 어레이는 행입니다.

52개의 항목이 있고 페이지당 10개를 원하는 경우 길이를 모듈 연산자와 나누고 하나를 더 추가합니다.

52 % 10 = 2 52 / 10 = 5

2개의 아이템은 5페이지 + 1페이지가 필요합니다.

그래서 저는 이렇게 하고 싶어요.

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

물론 이것은 하나의 가능한 해결책일 뿐이지만, 나는 이것이 어떤 식으로든 당신을 시작하게 할 수 있다고 생각한다. 코드는 단지 돕기 위한 것이다. 행운을 빈다.

언급URL : https://stackoverflow.com/questions/50203211/how-to-paginate-subsections-of-an-array-property-in-vue-js