Não atualizei o artigo há algum tempo, principalmente porque estou ocupado aprendendo coisas novas e esqueci de compartilhá -lo. Estou realmente envergonhado.
Olha, eu publiquei um artigo no meio da noite, compartilhando um widget de vue chamado Bootpage que eu me escrevi.
Se você não entende o vue.js, pode mudar para o artigo anterior "Uma breve palestra sobre o vue.js" para aprender sobre isso.
Introdução aos componentes de bootpage
Na verdade, não é um componente de ponta. Pelo contrário, é realmente apenas um componente simples de paginação de mesa. É principalmente porque preciso de um componente de paginação de tabela no meu projeto recente. Os componentes da paginação da biblioteca oficial da vue componentes são poderosos demais ou não são adequados para mim, então escrevi um para me contentar com isso. Talvez alguém como eu precise de um componente de paginação tão simples para implementar funções simples de paginação. Vou compartilhar aqui, e todos preencherão os boxes.
Se você precisar de componentes de ponta, poderá mudar para a biblioteca oficial de componentes do VUE: https://github.com/vuejs/awesome-vue#libraries-plugins
O BootPage é um componente de paginação de tabela que suporta dados estáticos e dados do servidor. Ele suporta ajustar o número de linhas exibidas em cada página e o número de páginas exibidas. O estilo é baseado no bootstrap, assim:
Demonstração online: https: //luozhihao.github.io/b ...
Como usar
No arquivo de componentes .vue, escrevemos modelo como este, ou seja, código HTML:
<TABLE> <TH> <TH> </TH> <th> Nome </th> <the> conteúdo </th> <the> observa </th> </tr> </thead> <tbody> <ttr v-for = "Data em TWLIST"> <td v-text = "Data.num"> </td> <td v-v-text = "Data.num> v-text = "Data.Contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <botão v-on: click = "refresh"> refresh </button "</div> <div> : lente = "lenarr": página-len = "pagelen": param = "param"> </boot-page> </div> </td> </td> </tfoot> </ table>
Na tag <arot-age> tag async refere-se a obter dados do lado do servidor, False não é; Os dados são uma matriz de dados tabulares estáticos; A lente é uma variedade de linhas exibidas por página; Page-len é o número de páginas que podem ser exibidas;
O código JavaScript que usa dados estáticos, ou seja, o conteúdo da tag de script é o seguinte:
<SCRIPT> Importar o BOOTPage de './components/bootpage.vue' export padrão {data () {return {lenarr: [10, 50, 100], // Comprimento por pagelen: 5, // exibe o número de páginas que pode ser exibido: [{Num: 1, autor: 'LOOZH', SPATS, 'SPAGE:' é exibido: 'Plaunse', que suporta: 'Paga. 'DSDS'}, {num: 2, autor: 'Luozh', Conteúdo: 'Suporte para ajustar o número de linhas exibidas por página e o número de páginas exibidas. O estilo é baseado no bootstrap ', observar:' dsds '}, {num: 3, autor:' luozh ', conteúdo:' <oot-page> tag assíncrono refere-se a recuperar dados do lado do servidor, false não, observar: 'dsds'}, {num: 4, autor: 'LOUZH', contornto ',' DSDs '}, {num: 4, autor:' Luys ', continentes', 'DSDs'}, {Num: 4, autor: 'LuAzh', contornto é; 'dsds'}, {num: 5, author: 'luozh', contents: 'lens is an array of rows displayed per page', remark: 'dsds'}, {num: 6, author: 'luozh', contents: 'page-len is the number of pages that can be displayed', remark: 'dsds'}, {num: 7, author: 'luozh', contents: 'The Os parâmetros de retorno do servidor são {dados: [], Page_num: 6}, onde os dados são dados tabulares e Page_num é o número total de páginas ', observa:' dsds '}, {num: 8, autor:' luzh ', o conteúdo:' não pode chamar isso. Use o TableList ao usar os dados do servidor: [] // dados pós-paging retornados pelo componente da paginação}}, componentes: {bootpage}, eventos: {// tabela dados retornados pelo componente da paginação '(dados) {this.tablelist = data}} </script>Geralmente, raramente usamos dados tabulares estáticos, e os dados da maioria dos aplicativos são obtidos do lado do servidor, então aqui está um método para obter dados de paginação por servidor:
O componente HTML que usa dados do servidor é o seguinte:
<Página de inicialização v-ref: página: async = "true": lens = "lenarr": url = "url": página-len = "pagelen": param = "param"> </sot-page>
onde URL é o endereço de solicitação do servidor; Param é o objeto de parâmetro que precisa ser enviado ao servidor;
O código usando os dados do servidor JavaScript é o seguinte:
<Cript> Importar a página de inicialização de './components/bootpage.vue' exportar padrão {data () {return {lenarr: [10, 50, 100], // Comprimento por página Defina pagelen: 5, // Número de páginas que podem ser exibidas URL: '/BotPage/', // Pedax param: {} pelo componente de paginação}}, métodos: {refresh () {this. $ refs.page.refresh () // uma função de atualização da tabela é fornecida aqui}}, componentes: {bootpage}, eventos: {// os dados da tabela retornados pelo componente da paginação (aqui é o retorno do servidor) 'dados' '(/s) (dados) (aqui, os dados do servidor (// "Dados). 'Refresh' () {this.Refresh ()}}}} </sCript>Nota: Além do conteúdo da matriz passado para a tabela de componentes, o servidor também precisa de um nome de chave do número total de páginas, denominado Page_num
Os parâmetros que o componente vem do servidor são:
{
Ativo: 1, // Número da página atual
Comprimento: 5 // Número de exibição por página
}
Os parâmetros para o retorno do servidor devem ser:
{
Dados: [], // dados tabulares
Page_num: 5 // contagem total de páginas
}
Código fonte do componente
Quanto à implementação da paginação, não exibirei o código -fonte aqui. Enviei todo o código -fonte para o meu github, e o endereço é: https://github.com/luozhihao/bootpage
Deixe -me lembrá -lo com antecedência: como levei várias horas para expulsar esse componente, devo ter sido inadequado em formatos de escrita e especificações dos componentes do VUE e não fui completamente independente, então preencho conscientemente o poço. Eu só vou compartilhar aqui.
Obviamente, você também pode modificar o código do componente à vontade para se adequar ao uso do seu projeto. Afinal, é bastante complicado implementar componentes de paginação grandes e completos.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.