Vue的動態表格+分頁

實現動態輸出列名和數據並且分頁

一、創建表格和分頁的模板

　　

<template id="tabletest">
            <div class="container">
                <table class="table table-hover">
                <tr>
                    <td>num</td>
                    <td v-for="(value,key) in persons[0]">{{key}}</td>
                </tr>
                <tr v-for="(p,index) in pagelist">
                    <td>{{index+1}}</td>
                    <td v-for="value in p">{{value}}</td>
                </tr>
                </table>
                <!-- 父組件監聽子組件的事件 -->
                <page @prev="changPage" @next="changPage" :length="persons.length"></page>
            </div>
        </template>
        <template id="page">
            <div>
                <button type="button" class="btn btn-primary" @click="prev">上一頁</button>
                <button type="button" class="btn btn-primary" @click="next">下一頁</button>
            </div>
        </template>

二、編寫表格和分頁的邏輯關系

　　

<script type="text/javascript">
        //記住要寫在myTable之前
        var page={
            template:"#page",
            data:function(){
                return {
                    pageNum:1
                }
            },
            props:{
                //數據長度
                length:{
                    type:Number,
                    required:true
                },
                pageSize:{
                    type:Number,
                    default:3
                }
                    
                
            },
            methods:{
                prev:function(){
                    if(this.pageNum>1)
                        this.pageNum--;
                    //給父組件發射數據
                    this.$emit("prev",this.pageNum);
                },
                next:function(){
                    var sumPage=parseInt(((this.length-1)/this.pageSize+1));
                    if(this.pageNum<sumPage)
                        {
                            this.pageNum++;
                        }
                    //給父組件發射數據
                    this.$emit("next",this.pageNum);
                }
            }
        }
        var myTable={
            template:"#tabletest",
            props:{
                persons:{
                    type:Array,
                    required:true
                },
                pageNum:{
                    type:Number,
                    default:1
                },
                pageSize:{
                    type:Number,
                    default:3
                }
            },
            data:function(){
                return {
                    //由於子組件不能直接更改父組件的值，所有用一個替換
                    pn:this.pageNum
                }
            },
            methods:{
                changPage:function(pageNum){
                    this.pn=pageNum;
                    console.log("page組件點擊了頁碼數為："+pageNum);
                }
            },
            components:{
                //注冊子組件
                page
            },
            //鈎子函數
            computed:{
                pagelist:function(){
                    var start=(this.pn-1)*this.pageSize;
                    var end=this.pn*this.pageSize;
                    return this.persons.slice(start,end);
                }
            }
            
            
        };
        
        var vue = new Vue({
            el: "#app",
            data: {
                persons: [{"name": "張三1","age": 19}, 
                          {"name": "張三2","age": 20}, 
                          {"name": "張三3","age": 21},
                          {"name": "張三4","age": 21},
                          {"name": "張三5","age": 21},
                          {"name": "張三6","age": 21},
                          {"name": "張三7","age": 21}
                          ],
                person2:[{"name":"諸葛亮","age":1900,"birthday":"181年","sex":"男"},
                         {"name":"貂蟬","age":1900,"birthday":"190年","sex":"女"},
                         {"name":"劉備","age":1920,"birthday":"161年","sex":"男"},
                         {"name":"曹操","age":1930,"birthday":"161年","sex":"男"},
                         {"name":"張飛","age":1930,"birthday":"161年","sex":"男"},
                         {"name":"關羽","age":1930,"birthday":"161年","sex":"男"},
                         {"name":"張遼","age":1930,"birthday":"161年","sex":"男"},
                         {"name":"馬超","age":1930,"birthday":"161年","sex":"男"},
                         {"name":"黃忠","age":1930,"birthday":"161年","sex":"男"},
                         {"name":"孫權","age":1930,"birthday":"161年","sex":"男"}
                ]
            },
            components:{
                //注冊
                myTable,page
            },
            methods:{
                
            }
        });
        
        
</script>

三、測試

　　注：我使用了bootstrap框架，和我的顯示效果會不一樣

<div id="app">
            <my-table :persons="persons"></my-table>
            <my-table :persons="person2"></my-table>
</div>