利用vue和element-ui设置表格内容分页

• html代码

  因为我写在template中，也就是新建了组建中，贴出代码。

<el-pagination 
    small
    layout="prev, pager, next"
    :total="total" 
    @current-change="current_change">
</el-pagination>

代码中，small代表是否使用小型分页样式
layout代表组件布局，子组件名用逗号分隔
属性： total代表总条目数
事件： current-change用于监听页数改变，而内容也发生改变
其他属性可参见element官方API

http://element.eleme.io/#/zh-CN/component/pagination

• 监听方法,写在methods中

methods:{
    created:function(){
        //加载班级的数据
            var url ='http://127.0.0.1:3000/clazz/findAll';
            //向后台获取数据
            var vm = this;
            $.getJSON(url,function(data){
                vm.clazzInfo = data;
                vm.total = data.length;//设置数据总数目！！！
            }); 
        },
    current_change:function(currentPage){
                this.currentPage = currentPage;
      }
}

其中url是在后台express搭建起来的脚手架所设置好的路由。

• 在data中注册使用的数据

  因为我是全局注册，data是个返回对象的函数

data:function(){
            return {
                total:0,//默认数据总数
                pagesize:7,//每页的数据条数
                currentPage:1,//默认开始页面
            }
        }

• 将数据绑定到tbody上

<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">

其中searchInfo是我获取到后台数据的数组。