백엔드에서 모든 데이터를 한 번에 전송하며, 프론트엔드에서 페이징 처리를 수행해야 하는 경우가 있습니다. 데이터 양이 많을 경우, 초기 로딩 속도가 느려지고 페이지가 버벅거릴 수 있습니다.

<div class="data-table-container">
  <el-table
    :data="displayedData"
    border
    ref="dataTable"
    :header-cell-style="{textAlign: 'center'}"
    :cell-style="{ textAlign: 'center' }"
    style="width: 100%;"
    height="400">
    <el-table-column prop="projectName" label="프로젝트명" fixed></el-table-column>
  </el-table>
</div>

data() {
  return {
    allRecords: [],        // 서버로부터 받은 전체 데이터
    paginatedData: [],     // 페이지별로 분할된 데이터 배열
    activePage: 1,         // 현재 표시 중인 페이지 번호
    itemsPerPage: 10,      // 한 페이지에 표시할 항목 수
    totalPages: 1,         // 전체 페이지 수
    totalItemCount: 0,     // 전체 데이터 항목 수
    displayedData: []      // 현재 페이지에 표시할 데이터
  };
},
created() {
  this.fetchData();
},
methods: {
  // 데이터를 서버에서 가져오는 메서드
  fetchData() {
    systemDataSourceApi.systemDataSource().then(res => {
      this.allRecords = res.result.pushData;
      this.totalItemCount = this.allRecords.length;
      this.calculatePagination();
    });
  },
  // 페이징 데이터를 계산하는 메서드
  calculatePagination() {
    if (this.allRecords.length > 0) {
      this.totalPages = Math.ceil(this.allRecords.length / this.itemsPerPage) || 1;
    }
    // 전체 데이터를 페이지 크기에 따라 분할하여 저장
    for (let i = 0; i < this.totalPages; i++) {
      // 각 페이지는 배열이며, slice를 사용하여 데이터를 분할
      this.paginatedData[i] = this.allRecords.slice(this.itemsPerPage * i, this.itemsPerPage * (i + 1));
    }
    // 첫 페이지 데이터를 표시 (배열 인덱스는 0부터 시작하므로 -1)
    this.displayedData = this.paginatedData[this.activePage - 1];
  },
  // 페이지 크기가 변경될 때 호출되는 핸들러
  handleSizeChange(newItemsPerPage) {
    this.itemsPerPage = newItemsPerPage;
    this.calculatePagination();
  },
  // 현재 페이지가 변경될 때 호출되는 핸들러
  handleCurrentChange(newPageNumber) {
    this.activePage = newPageNumber;
    this.displayedData = this.paginatedData[newPageNumber - 1];
  }
}