No he actualizado el artículo por un tiempo, principalmente porque he estado ocupado aprendiendo cosas nuevas y olvidé compartirlo. Estoy realmente avergonzado.
Mira, publiqué un artículo en medio de la noche, compartiendo un widget Vue llamado Bootpage que escribí.
Si no comprende Vue.js, puede pasar a mi artículo anterior "Una breve charla sobre Vue.js" para aprender sobre ello.
Introducción a los componentes de la página de arranque
En realidad, no es un componente de alta gama. Por el contrario, en realidad es solo un componente simple de paginación de tabla. Es principalmente porque necesito un componente de paginación de tabla en mi proyecto reciente. Los componentes de paginación de la biblioteca de componentes oficiales de VUE son demasiado poderosos o no adecuados para mí, así que escribí uno yo mismo para confiar con eso. Tal vez alguien como yo necesita un componente de paginación tan simple para implementar funciones de paginación simples. Lo compartiré aquí, y todos completarán los pozos.
Si necesita componentes de alta gama, puede pasar a la biblioteca oficial de componentes VUE: https://github.com/vuejs/awesome-vue#librars-plugins
Bootpage es un componente de paginación de tabla que admite datos estáticos y datos del servidor. Admite ajustar el número de filas que se muestran en cada página y el número de páginas que se muestran. El estilo se basa en Bootstrap, igual que esto:
Demostración en línea: https: //luozhihao.github.io/b ...
Cómo usar
En el archivo del componente .Vue, escribimos una plantilla como esta, es decir, código HTML:
<Table> <thead> <tr> <th> id </th> <th> name </th> <th> content </th> <th> observar </th> </tr> </thead> <tbody> <ttr v-for = "data en tablelist"> <td v-text = "data.num"> </td> <td v-text = "data.author"> <<td tde v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <button v-on: click = "refresh"> refresh </boton> </div> <div> <div> <boot-page: async = "false": data = "enumera" "lens" lenr "lens". : Page-Len = "Pagelen": Param = "Param"> </ Boot-Page> </div> </td> </td> </tfoot> </table>
En la etiqueta <RoT-Page> async se refiere a si se debe obtener datos del lado del servidor, el falso es no; Los datos son una matriz de datos tabulares estáticas; La lente es una matriz de filas que se muestran por página; Page-Len es el número de páginas que se pueden mostrar;
Código JavaScript que usa datos estáticos, es decir, los contenidos en la etiqueta de script son los siguientes:
<script> Importar bootpage desde './Components/bootpage.vue' exportar predeterminado {data () {return {lenarr: [10, 50, 100], // Longitud de visualización por pagelen: 5, // Número de visualización de páginas que se pueden mostrar: [{{{num: 1, autor: 'LuOzh', contenido: 'Bootpage es una tabla de tabla Page Page 'DSDS'}, {num: 2, autor: 'Luozh', Contenido: 'Soporte para ajustar el número de filas que se muestran por página y el número de páginas que se muestran. The style is based on bootstrap', remark: 'dsds'}, {num: 3, author: 'luozh', contents: '<boot-page> tag async refers to whether to retrieve data from the server side, false is no', remark: 'dsds'}, {num: 4, author: 'luozh', contents: 'data is a static tabular data array;', remark: 'DSDS'}, {num: 5, autor: 'LUOZH', Contenido: 'Lens es una matriz de filas que se muestran por página', Observación: 'DSDS'}, {num: 6, autor: 'LUOZH', Contenido: 'Page-Len es el número de páginas que se pueden mostrar', observación: 'DSDS'}, {num: 7, 7, 7, ',' LUOZ: ',' LUOZ: 'LUOZH,' LUOZ: 'LUO Los parámetros de retorno del servidor son {Data: [], Page_num: 6}, donde los datos son datos tabulares y page_num es el número total de páginas ', observación:' dsds '}, {num: 8, el autor:' lUoZh ', contenido:' puede llamar a esto. $ refs.page.Refresh () Para refrescar la tabla de datos ', observar:' dsds '}, / / los datos de la tabla de bruto, lo que hace la tabla de bruto. Use TableList cuando use datos del servidor: [] // datos post-paginación devueltos por el componente de paginación}}, componentes: {bootpage}, eventos: {// datos de tabla devueltos por el componente de paginación '(data) {this.tableList = data}}} </script>En general, rara vez usamos datos tabulares estáticos, y la mayoría de los datos de las aplicaciones se obtienen del lado del servidor, por lo que aquí hay un método para obtener datos de paginación del servidor:
El componente HTML que usa datos del servidor es el siguiente:
<Boot-Page V-ref: Page: async = "true": lens = "Lenarr": url = "url": page-len = "Pagelen": param = "param"> </boot-page>
donde la URL es la dirección de solicitud del servidor; Param es el objeto de parámetro que debe enviarse al servidor;
El código que usa datos del servidor JavaScript es el siguiente:
<script> Importar una página de arranque desde './Components/BootPage.vue' Exportar predeterminado {data () {return {lenarr: [10, 50, 100], // Longitud de visualización por página Establezca pagelen: 5, // Número de páginas que se pueden mostrar URL: '/BootPage/', // Parámetro de ruta de solicitud: {}, // Pass Parameter TangeList El componente de paginación}}, métodos: {refresh () {this. $ refs.page.refresh () // se proporciona una función de actualización de tabla aquí}}, componentes: {bootpage}, eventos: {// los datos de tabla devuelto por el componente de paginación (aquí son los datos devueltos por el servidor) (datos) (datos) {this.tableSist = datos de datos, / / / / / los datos son los datos devueltos por el servidor) (datos) (datos) {this. () {this.Refresh ()}}}} </script>Nota: Además del contenido de la matriz pasada a la tabla de componentes, el servidor también necesita un nombre clave del número total de páginas, llamado Page_Num
Los parámetros con los que viene el componente al servidor son:
{
Activo: 1, // número de página actual
Longitud: 5 // número de visualizado por página
}
Los parámetros para la devolución del servidor deben ser:
{
Datos: [], // datos tabulares
Page_num: 5 // recuento total de páginas
}
Código fuente de componentes
En cuanto a la implementación de la paginación, no mostraré el código fuente aquí. Subí todo el código fuente a mi github, y la dirección es: https://github.com/luozhihao/bootpage
Permítanme recordarle de antemano: debido a que tardé varias horas en expulsar este componente, debo haber sido inadecuado en los formatos de escritura y las especificaciones de los componentes VUE y no he sido completamente independiente, por lo que consciente completo el pozo. Solo lo compartiré aquí.
Por supuesto, también puede modificar el código del componente a voluntad para adaptarse al uso de su proyecto. Después de todo, es bastante complicado implementar componentes de paginación grandes y completos.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.