element ui 分页实例

本文是点击页数，调用接口取查查询分页。
element ui对分页封装的很好，基本和展示表格没有太多关系。展示数据就不陈列出来了。思路：数据接口返回总条数，传给分页插件，点击分页会触发展示条数和页数的方法，在这两个方法里调用获取数据的接口。
1、html部分

<el-pagination
   @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10]"
    :page-size="pageSize"
    :pager-count="5"
    :small="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total=total>
</el-pagination>

截图示例：

2、js部分：

data(){
	//分页
   total:19,
   pageSize:5,
   currentPage:1
},
methods:{
    //条数变化
	handleSizeChange(val) {
	     console.log(`每页 ${val} 条`);
	     this.pageSize = val;
	     this.getZxdjAll();
	 },
	 //页数变化
	 handleCurrentChange(val) {
	     console.log(`当前页: ${val}`);
	     this.currentPage = val;
	     this.getZxdjAll();
	 },
	 //获取数据
	 getZxdjAll(){
            var that = this;
            let url = CONFIG.SERVERS.srv+"page="+this.currentPage+"&pageSize="+this.pageSize;
            axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
            axios.get(url).then(function(response){
                console.log(response.data.data);
                if(response.data.retCode == 1){
                    that.cities = response.data.data.list;
                    that.restaurants = response.data.data.list;//展示的数据
                    that.total = response.data.data.totalCount; //总条数
                }
            }).catch(function(error){
                console.log(error)
            })  
        },
}

完毕！