I haven't updated the article for a while, mainly because I have been busy learning new things and forgot to share it. I am really ashamed.
Look, I posted an article in the middle of the night, sharing a Vue widget called BootPage that I wrote myself.
If you don’t understand Vue.js, you can move to my previous article “A Brief Talk about Vue.js” to learn about it.
Introduction to BootPage Components
Actually, it is not a high-end component. On the contrary, it is really just a simple table paging component. It is mainly because I need a table paging component in my recent project. The Vue official component library pagination components are too powerful or not suitable for me, so I wrote one myself to make do with it. Maybe someone like me needs such a simple paging component to implement simple paging functions. I will share it here, and everyone will fill in the pits.
If you need high-end components, you can move to the official Vue component library: https://github.com/vuejs/awesome-vue#libraries--plugins
BootPage is a table paging component that supports static data and server data. It supports adjusting the number of rows displayed on each page and the number of pages displayed. The style is based on bootstrap, just like this:
Online demonstration: https://luozhihao.github.io/B...
How to use
In the .vue component file, we write template like this, that is, html code:
<table> <thead> <tr> <th>id</th> <th>name</th> <th>content</th> <th>remark</th> </tr> </thead> <tbody> <ttr v-for="data in tableList"> <td v-text="data.num"></td> <td v-text="data.author"></td> <td v-text="data.contents"></td> <td v-text="data.remark"></td> </tbody> <tfoot> <tr> <td colspan="4"> <div> <button v-on:click="refresh">Refresh</button> </div> <div> <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page> </div> </td> </td> </tfoot></table>
In the <boot-page> tag async refers to whether to obtain data from the server side, false is no; data is a static tabular data array; lens is an array of rows displayed per page; page-len is the number of pages that can be displayed;
JavaScript code that uses static data, that is, the contents in the script tag are as follows:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Display number of pages that can be displayed: [ {num: 1, author: 'luozh', contents: 'BootPage is a table paging component that supports static data and server data', remark: 'dsds'}, {num: 2, author: 'luozh', contents: 'support to adjust the number of rows displayed per page and the number of pages displayed. 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, 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 server's return parameters are {data:[], page_num: 6}, where data is tabular data and page_num is the total number of pages', remark: 'dsds'}, {num: 8, author: 'luozh', contents: 'can call this.$refs.page.refresh() to refresh the table data', remark: 'dsds'} ], // The raw table data, you do not need to use tableList when using server data: [] // Post-paging data returned by the pagination component} }, components: { bootPage }, events: { // Table data returned by the pagination component' (data) { this.tableList = data } } }</script>Generally, we rarely use static tabular data, and most applications' data are obtained from the server side, so here is a method to obtain server pagination data:
The component HTML that uses server data is as follows:
<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>
where url is the request address of the server; param is the parameter object that needs to be sent to the server;
The code using server data javascript is as follows:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per page set pageLen: 5, // Number of pages that can be displayed url: '/bootpage/', // Request path param: {}, // Pass parameter tableList to the server: [] // Post-paging data sent back by the pagination component} }, methods: { refresh () { this.$refs.page.refresh() // A table refresh function is provided here} }, components: { bootPage }, events: { // The table data returned by the pagination component (here is the data returned by the server) 'data' (data) { this.tableList = data }, // Refresh the data 'refresh' () { this.refresh() } } } }</script>Note: In addition to the array content passed to the component table, the server also needs a key name of the total number of pages, named page_num
The parameters that the component comes with to the server are:
{
active: 1, // Current page number
length: 5 // Number of displayed per page
}
The parameters for server return must be:
{
data: [], // Tabular data
page_num: 5 // Total page count
}
Component source code
As for the implementation of pagination, I will not display the source code here. I uploaded all the source code to my github, and the address is: https://github.com/luozhihao/BootPage
Let me remind you in advance: Because I took several hours to drive out this component, I must have been inadequate in writing formats and specifications of Vue components and have not been completely independent, so I consciously fill in the pit. I will only share it here.
Of course, you can also modify the component's code at will to suit your project's use. After all, it is quite complicated to implement large and complete paging components.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.