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

有一段時間沒更新文章了，主要是由於本身一直在忙着學習新的東西而忘記分享了，實在慚愧。

這不，大半夜發文更一篇文章，分享一個本身編寫的一個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標籤內的內容以下：

<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組件的編寫格式和規範確定是考慮不周的，沒有徹底獨立出來，因此自覺填坑咯，這裏只做分享。

固然你也能夠隨意的修改組件的代碼來適合本身項目的使用，畢竟實現大而全的分頁組件仍是比較複雜的。

 

收工，歡迎評論指正。