Paginação no Vue.js

Olá Habr! Apresento a você a tradução do artigo " Pagination in Vue.js ", de Denny Headrick.

A paginação aprimora o UX, permitindo que os usuários visualizem dados em pequenos blocos ou em páginas. Portanto, o componente Vue.js. pode ser paginado, o que nos permitirá visualizar apenas parte de nossos dados por vez.



Primeiro, adicionarei peça por peça ao meu objeto JavaScript. E então eu vou mostrar modelo

De todos os dados locais, preciso apenas dos dados - o número da página.

data(){ return { pageNumber: 0 //   0 } } 

Para props (propriedades), a transferência de dados é obrigatória, mas também utilizarei o argumento de tamanho para o número máximo de registros.

 props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 } } 

Para minha implementação, usarei métodos para ir para as páginas anteriores (anterior) e próxima (próxima):

 methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; } } 

Uma propriedade computada rápida para descobrir quantas páginas existem:

 pageCount(){ let l = this.listData.length, s = this.size; //     return Math.ceil(l/s); //  // return Math.floor(l/s); } 

Agora, a propriedade paginatedData calculada é o local onde tudo é combinado. Estes são os dados filtrados que serão exibidos.

 paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end); } 

Editorial : Inicialmente, fiz algo horrível e complicado para copiar uma matriz. Usar .slice é a melhor abordagem. Obrigado, Alexander Karelas .

E nosso modelo

 <div> <ul> <li v-for="p in paginatedData"> {{p.first}} {{p.last}} {{p.suffix}} </li> </ul> <button @click="prevPage"> Previous </button> <button @click="nextPage"> Next </button> </div> 

Quero que os botões funcionem quando for necessário. Para o botão prevPage, adicionarei:

: desativado = "pageNumber == 0"

e no botão nextPage , adicionarei:

: desativado = "pageNumber> = número da página -1"

Demonstração de trabalho do meu componente:


Às vezes é difícil superestimar a situação, mas a paginação é uma função simples que podemos oferecer aos nossos usuários sem muito esforço.

Obrigado pela leitura!

Denny Headrick é um desenvolvedor web da USAF que ama demais seu trabalho. Além de desenvolver em várias plataformas e no Vue.js, quando pode, ele gosta de blogar ocasionalmente. Você pode segui-lo no Twitter em @dennythecoder.