基於Vue.js的表格分頁組件

標籤：技術分享   ret   eth   data   上傳   簡介   cli   pre   靜態   

BootPage組件簡介

其實也不是啥高大上的組件了，相反確實一個簡單的表格分頁組件而已，主要是自己最近項目中需要一個表格分頁組件，而Vue官方組件庫裡分頁組件都功能太強大或者沒有適合我的，所以就自己寫了一個湊合著用，或許有人和我一樣需要這樣一個簡單的分頁組件來實現簡單的分頁功能，我便在這裡分享一下，大家自覺填坑咯。

如需高大上的組件，可以移步Vue官方組件庫：https://github.com/vuejs/awesome-vue#libraries--plugins

 

BootPage是一款支援待用資料和伺服器資料的表格分頁組件，支援調整每頁顯示行數和頁碼顯示個數，樣式基於bootstrap，就像這樣：

 線上示範：https://luozhihao.github.io/B...

 

使用方法

在.vue的組件檔案中我們這樣寫template，即html代碼：

<table class="table table-hover table-bordered">        <thead>            <tr>                <th width="10%">id</th>                <th width="30%">name</th>                <th width="40%">content</th>                <th width="20%">remark</th>            </tr>        </thead>        <tbody>            <tr 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>            </tr>        </tbody>        <tfoot>            <tr>                <td colspan="4">                    <div class="pull-left">                        <button class="btn btn-default" v-on:click="refresh">重新整理</button>                    </div>                    <div class="pull-right">                        <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>                    </div>                </td>            </tr>        </tfoot></table>

<boot-page>標籤中async指是否從伺服器端擷取資料，false為否；data為靜態表格式資料數組；lens為每頁顯示行數的數組；page-len為可顯示的頁碼數；

使用待用資料的javascript代碼即script標籤內的內容如下：

<script>        import bootPage from ‘./components/BootPage.vue‘        export default {            data () {                return {                    lenArr: [10, 50, 100], // 每頁顯示長度設定                    pageLen: 5, // 可顯示的分頁數                    lists: [                        {num: 1, author: ‘luozh‘, contents: ‘BootPage是一款支援待用資料和伺服器資料的表格分頁組件‘, remark: ‘dsds‘},                        {num: 2, author: ‘luozh‘, contents: ‘支援調整每頁顯示行數和頁碼顯示個數，樣式基於bootstrap‘, remark: ‘dsds‘},                        {num: 3, author: ‘luozh‘, contents: ‘<boot-page>標籤中async指是否從伺服器端擷取資料，false為否‘, remark: ‘dsds‘},                        {num: 4, author: ‘luozh‘, contents: ‘data為靜態表格式資料數組；‘, remark: ‘dsds‘},                        {num: 5, author: ‘luozh‘, contents: ‘lens為每頁顯示行數的數組‘, remark: ‘dsds‘},                        {num: 6, author: ‘luozh‘, contents: ‘page-len為可顯示的頁碼數‘, remark: ‘dsds‘},                        {num: 7, author: ‘luozh‘, contents: ‘伺服器回傳參數為{data:[], page_num: 6}, 其中data為表格式資料，page_num為總頁數‘, remark: ‘dsds‘},                        {num: 8, author: ‘luozh‘, contents: ‘可以調用this.$refs.page.refresh()重新整理表格式資料‘, remark: ‘dsds‘}                    ], // 表格未經處理資料，使用伺服器資料時無需使用                    tableList: [] // 分頁組件傳回的分頁後資料                }            },            components: {                bootPage            },            events: {                // 分頁組件傳回的表格式資料                ‘data‘ (data) {                    this.tableList = data                }            }        }</script>

 

一般我們很少使用靜態表格式資料，大多數應用的資料都是從伺服器端擷取的，所以這裡提供了擷取伺服器分頁資料的方法：

使用伺服器資料的組件HTML如下：

<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>

其中url為伺服器的請求地址；param為需要向伺服器發送的參數對象；

 

使用伺服器資料javascript的代碼如下：

<script>        import bootPage from ‘./components/BootPage.vue‘        export default {            data () {                return {                    lenArr: [10, 50, 100], // 每頁顯示長度設定                    pageLen: 5, // 可顯示的分頁數                    url: ‘/bootpage/‘, // 請求路徑                    param: {}, // 向伺服器傳遞參數                    tableList: [] // 分頁組件傳回的分頁後資料                }            },            methods: {                refresh () {                    this.$refs.page.refresh() // 這裡提供了一個表格重新整理功能                }            },            components: {                bootPage            },            events: {                // 分頁組件傳回的表格式資料（這裡即為伺服器傳回的資料）                ‘data‘ (data) {                    this.tableList = data                },                // 重新整理資料                ‘refresh‘ () {                    this.refresh()                }            }        }</script>

註：伺服器除了傳給組件表格的數組內容，還需一個總頁數的鍵名，名為page_num

 

組件內建向伺服器傳遞的參數為:

{    active: 1, // 當前頁碼    length: 5  // 每頁顯示個數}

伺服器回傳的參數需為:

{    data: [], // 表格式資料    page_num: 5  // 總頁數}

 

組件源碼

至於分頁的實現源碼這裡的就不展示了，所有源碼我都上傳到了我的github，地址為：https://github.com/luozhihao/BootPage

這裡事先提個醒：因為這個組件是我用幾個小時趕出來的，所以對於Vue組件的編寫格式和規範肯定是考慮不周的，沒有完全獨立出來，所以自覺填坑咯，這裡只作分享。

當然你也可以隨意的修改組件的代碼來適合自己項目的使用，畢竟實現大而全的分頁組件還是比較複雜的。

 

收工，歡迎評論指正。

 

轉載請註明來自——公眾號：前端呼啦圈（Love-FED）

基於Vue.js的表格分頁組件