vue+Element实现获取数据并分页

与上述样式有所不同，如需更改样式请访问Element主页------Pagination 分页

HTML

<table>
	<tr v-for="items in projectReportList" :key="items.id">
    	<td>{{items.type2string}}</td><td>{{items.gentime}}</td>
    </tr>
<table>
<div>                               
	<el-pagination
    	 @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="opsList.pageNumber"
         :page-size="opsList.totalElements / opsList.totalPages"
         layout="total, sizes, prev, pager, next, jumper"
         :total="opsList.totalElements">
   </el-pagination>
</div>

JS

export default {
        name: "OpsReportAnalysis",
        data () {
            return {
                opsList: [],       //返回的数据
                projectReportList: [],      //projectReportList
                projectId: this.$route.params.projid,
                
                startTime: '',      //开始时间
                endTime: '',        //结束时间

                // currentPage: 1,     //当前页码
                pageNumber: 1,     //初始页
                type: 0,     //报表类型,0为初始值 请选择
                pageSize: 5,     //每页页数
            }
        },
        created() {
            this.getData();//获取数据的方法
            // this.handleCurrentChange();
        },
        methods: {
        handleSizeChange: function (size) {
                this.pageSize = size;
                //console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.pageNumber = currentPage;
                console.log(this.currentPage)  //点击第几页
                this.$http({
                    url:this.api.energyoperate.get_opsReportAnalysis, //加传过来的页数获取数据
                    type: 'get',
                    dataType: 'json',
                    params: {
                        ....................//请求的参数
                        page: this.pageNumber,
                        pageSize: this.pageSize
                    }
                }).then(res =>{
                    this.opsList = res.data.data;
                    this.projectReportList = res.data.data.projectReportList;
                    console.log('请求成功！')
                }).catch(err =>{
                    console.log('请求失败！')
                })
            },
            getData(){//获取接口数据的方法
            	....//和上边请求方式一样不再赘述
            }
      }
  }

CSS

....

大概思路，如有不同，稍加改正即可。