Vue 에서 ElementUI 페이지 구성 요소 Pagination 사용 방법

Vue 에서 Element UI 페이지 구성 요소 Pagination 의 사용 을 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
개요
ElementUI 는 el-pagination 구성 요 소 를 제공 합 니 다.해당 매개 변수 와 이 벤트 를 설정 하면 페이지 를 나 눌 수 있 습 니 다.

실현
1.기본 용법

<div class="pagination">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="tablePage.pageNum"
      :page-size="tablePage.pageSize"
      :page-sizes="pageSizes"
      :total="tablePage.total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />
</div>

data() {
    return {
      tablePage: {
        pageNum: 1, //    
        pageSize: 10, //      
        total: 0 //     
      },
      pageSizes: [10, 20, 30]
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      //       
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      //       
    }
  }

2.백 엔 드 페이지 의 실현
실현 사고:배경 에 요청 을 보 내 고 pageNum,pageSize 두 매개 변 수 를 입력 하여 해당 하 는 페이지 데 이 터 를 직접 얻 습 니 다.

//     
getData() {
      let param = {
        pageNum: this.tablePage.pageNum,
        pageSize: this.tablePage.pageSize
      }
      //         
      getDataApi(param, { loading: true }).then(res => {
        //       
        this.list = res.data.list
        this.tablePage.total = res.data.total
      })
    },

3.전단 페이지 의 실현
실현 사고:배경 에 요청 을 보 내 고 모든 데 이 터 를 얻 습 니 다.전단 은 pageNum,pageSize 를 통 해 데 이 터 를 처리 하고 최종 적 으로 해당 하 는 페이지 데 이 터 를 얻 습 니 다.다음은 데 이 터 를 처리 하 는 두 가지 방법 이다.
1.Array.slice 를 이용 하여 원 하 는 배열 세 션 을 캡 처 합 니 다.(이 방법 은 전체 페이지 수가'1'과 끝 페이지 인 상황 을 고려 해 야 합 니 다)
2.Array.filter 를 이용 하여 원 하 는 배열 세 션 을 걸 러 냅 니 다.

/**
     *       
     * @param data [Array]        
     * @param num [Number]      
     * @param size [Number]        
*/
    getList(data, num, size) {
      let list, total, start, end, isFirst, isLast
      total = data.length
      isFirst = total < size
      isLast = Math.ceil(total / size) === num
      start = (num - 1) * size
      end = isFirst || isLast ? start + (total % size) : start + size
      list = data.slice(start, end)
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    }
    /**
     *       
     * @param data [Array]        
     * @param num [Number]      
     * @param size [Number]        
     */
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
}

요약:전단 페이지 든 백 엔 드 페이지 든 최종 적 으로 두 개의 인 자 를 받 아야 합 니 다.pageNum(현재 페이지),pageSize(페이지 당 몇 개).
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.