Vue 문서에서 테이블 정렬 및 페이징 기능을 구현하는 방법

Vue는 단일 페이지 애플리케이션(SPA)을 개발하는 데 자주 사용되는 인기 있는 JavaScript 프레임워크입니다. Vue 애플리케이션에서 많은 양의 데이터를 표시해야 할 때 일반적으로 테이블을 사용하여 데이터를 표시합니다. 사용자가 데이터를 더 쉽게 탐색할 수 있도록 하려면 테이블을 정렬하고 페이지 매김하는 것이 매우 중요합니다. 이 기사에서는 Vue 애플리케이션에서 테이블 정렬 및 페이징 기능을 사용하는 방법을 소개합니다.

1. 테이블 정렬 구현

먼저 Vue 애플리케이션에 "lodash"라는 JavaScript 라이브러리를 도입해야 합니다. Lodash는 개발 작업을 크게 단순화할 수 있는 많은 실용적인 기능을 제공하는 매우 유용한 도구 라이브러리입니다.

다음으로 Vue 구성 요소의 "data" 옵션에서 표시하려는 데이터를 저장할 배열을 정의합니다. 또한 "sortKey" 및 "reverse"와 같은 정렬 속성을 정의하고 기본값을 각각 "name" 및 "false"로 설정해야 합니다.

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    sortKey: 'name',
    reverse: false
  }
},

다음으로, 사용자가 헤더를 클릭하여 열별로 정렬할 수 있도록 헤더의 각 열에 대한 클릭 이벤트를 정의해야 합니다. 먼저 데이터를 정렬하는 데 사용할 "sortBy" 메서드를 정의해야 합니다. 이 방법에서는 먼저 정렬할 필드를 "sortKey" 속성에 저장한 다음 "reverse" 속성의 상태에 따라 정렬해야 합니다.

methods: {
  sortBy(key) {
    this.sortKey = key;
    this.reverse = !this.reverse;
    this.items.sort((a, b) => {
      let modifier = 1;
      if (this.reverse) modifier = -1;
      if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
      if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
      return 0;
    });
  }
},

마지막으로 v-on 지시문을 사용하여 클릭 이벤트를 바인딩하고 테이블 헤더의 각 열에서 sortBy 메서드를 호출해야 합니다.

<th v-on:click="sortBy('name')">Name</th>
<th v-on:click="sortBy('age')">Age</th>

2. 테이블 페이징 구현

많은 양의 데이터를 표시해야 할 때 모든 데이터를 하나의 테이블에 표시하면 페이지 스크롤이 느려질 수 있습니다. 따라서 데이터를 여러 페이지로 분할하여 별도로 표시해야 합니다. 페이징을 구현하는 방법은 다음과 같습니다.

Vue 구성 요소의 "data" 옵션에서 현재 표시된 페이지를 추적하려면 "currentPage" 속성을 정의해야 합니다. 그리고 "pageSize" 속성을 정의하여 각 페이지에 포함된 항목 수를 정의합니다.

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    currentPage: 1,
    pageSize: 2
  }
},

다음으로, 현재 페이지에 필요한 항목의 하위 집합을 반환하는 계산된 속성을 정의해야 합니다.

computed: {
  displayedItems() {
    let start = (this.currentPage - 1) * this.pageSize;
    let end = start + this.pageSize;
    return this.items.slice(start, end);
  }
},

마지막으로 Vue 템플릿에 페이지 매김 구성 요소를 추가해야 합니다. Vuetify, Bootstrap 또는 사용자 정의 CSS를 사용하여 페이징 구성 요소를 만들 수 있습니다. 여기서는 사용자 정의 CSS를 예로 들어 보겠습니다.

<ul class="pagination">
  <li v-bind:class="{ disabled: currentPage === 1 }" v-on:click="currentPage--">
    <a>Previous</a>
  </li>
  <li v-for="pageNumber in pages" v-bind:class="{ active: currentPage === pageNumber }" v-on:click="currentPage = pageNumber">
    <a>{{ pageNumber }}</a>
  </li>
  <li v-bind:class="{ disabled: currentPage === pageCount }" v-on:click="currentPage++">
    <a>Next</a>
  </li>
</ul>

Vue 구성 요소에서는 두 개의 새로운 계산 속성을 정의해야 합니다. "pageCount"는 총 페이지 수를 계산하고 "pages"는 렌더링 페이지 번호를 반복하는 데 사용되는 배열을 계산합니다.

computed: {
  pageCount() {
    return Math.ceil(this.items.length / this.pageSize);
  },
  pages() {
    let pagesArray = [];
    for (let i = 1; i <= this.pageCount; i++) {
      pagesArray.push(i);
    }
    return pagesArray;
  }
},

이렇게 해서 테이블 페이징 구현이 완료되었습니다. 페이지 매김 구성 요소에서 페이지 번호를 클릭하면 "currentPage" 속성이 그에 따라 업데이트되고 계산된 속성 "displayedItems"가 현재 페이지 번호에 필요한 항목을 표시하는 데 사용됩니다. 간단히 말해서, Vue에서 테이블 정렬과 페이징을 구현하는 것은 어렵지 않으며, 위의 방법을 사용하면 쉽게 구현할 수 있습니다.

위 내용은 Vue 문서에서 테이블 정렬 및 페이징 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!