最近小熙在做Vue有關的專案需要前端分頁外掛，看到篇不錯的，特此轉載分享

有一段時間沒更新文章了，主要是因為自己一直在忙著學習新的東西而忘記分享了，實在慚愧。

這不，大半夜發文更一篇文章，分享一個自己編寫的一個Vue的小元件，名叫BootPage。

不瞭解Vue.js的童鞋可以移步我的上一篇文章《淺談Vue.js》瞭解一下。

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標籤內的內容如下：

按 Ctrl+C 複製程式碼 按 Ctrl+C 複製程式碼

 

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

使用伺服器資料的元件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）

如果覺得本文對你有幫助，可以關注我的微信公眾號，來這裡聊點關於前端的事情。

關注微信公眾號：前端呼啦圈