vue进阶之vue-easytable实现前端的表格+分页

表格+分页

对于还在坑中的自己而言，勤奋的笔记不能停。还是在博客上多记录免得文件丢失到时不知哪里找。网上虽然有许多分页内容，但是对初学者而言有许多不必要的东西容易搞混阅读者。所以自己弄了一个简单纯净版的，没有过多的修饰内容。分页部分可以使用elementui中的，也可以直接用vue-easytable中的，两者一样的，没啥区别。

第一步：引入vue-easytable

（这个网上有许多的资料，可以自己去找）

 给个vue-easytable的链接：API&实例

1：npm下载vue-easytable

npm install vue-easytable --save-dev

2：在main.js中全局引入

import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'

Vue.component(VTable.name,VTable)
Vue.component(VPagination.name,VPagination)

第二步：创建表格数据

因为这里没有连接后端，所以要分页肯定需要一大串数据，直接写data里有点长久分离出来了。下面给了部分数据（删除后的）

export default[
    {'id':'1','name':'小红','age':'12','height':'112','sex':'女','score':'100'},
    {'id':'2','name':'小丽','age':'12','height':'116','sex':'女','score':'99'},
    {'id':'3','name':'小芳','age':'12','height':'113','sex':'女','score':'98'},
    {'id':'4','name':'小华','age':'12','height':'130','sex':'男','score':'96'},
    {'id':'5','name':'小聪','age':'12','height':'120','sex':'男','score':'93'},
    {'id':'6','name':'小胖','age':'12','height':'118','sex':'男','score':'86'},
    {'id':'7','name':'小明','age':'12','height':'121','sex':'男','score':'59'},
    {'id':'8','name':'小飞','age':'12','height':'125','sex':'男','score':'92'},
    {'id':'9','name':'小环','age':'12','height':'120','sex':'女','score':'93'},
    {'id':'10','name':'小义','age':'12','height':'116','sex':'男','score':'79'},

    {'id':'11','name':'小白','age':'12','height':'116','sex':'男','score':'81'},
    {'id':'12','name':'小黑','age':'12','height':'118','sex':'男','score':'88'},
    {'id':'13','name':'小海','age':'12','height':'125','sex':'男','score':'83'},
    {'id':'14','name':'小金','age':'12','height':'129','sex':'男','score':'82'},
    {'id':'15','name':'小路','age':'12','height':'127','sex':'女','score':'72'},
    {'id':'16','name':'小龙','age':'12','height':'125','sex':'男','score':'96'},
    {'id':'17','name':'小蓝','age':'12','height':'118','sex':'女','score':'93'},
    {'id':'18','name':'小兰','age':'12','height':'124','sex':'女','score':'71'},
    {'id':'19','name':'小高','age':'12','height':'116','sex':'女','score':'79'},
    {'id':'20','name':'小国','age':'12','height':'130','sex':'男','score':'68'},
]

第三步：代码编写

创建一个tablePage.vue

效果图展示