Vue框架Element UI教程-axios表格分页（九）

今天来写一个分页，表格分页在实际项目中经常用到，之前也写过关与bootstrap table 里面的表格分页，道理都差不多一样的，Element UI也有自己的组件可以用，话不多说，直接上代码了。

Element UI手册：https://cloud.tencent.com/developer/doc/1270
中文文档：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

接着之前的项目继续写，打开一个vue界面，在里面写如下代码：

test.json

 [  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "徐家汇"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "徐家汇"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "徐家汇"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "徐家汇"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "徐家汇"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "徐家汇"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "徐家汇"  
        },
        
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }  
    ]  

效果如下

到这里就成功的实现了一个表格和分页了，数据是用mock模拟的，实际中换成后端的接口就可以了。

---

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，对于博客上面有不会的问题，欢迎加入编程微刊qq群：260352626。

以上几章代码写在了github上面，需要的可以参考，后续会继续完善：https://github.com/wangxiaoting666/Element-UI