vue实现分页功能

1，HTML代码

<template>
       <el-pagination style="float:right;margin-top: 0"
                                           @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :page-size="rows"
                                           :current-page.sync="currentPage"
                                           layout="total, prev, pager, next, jumper"
                                           :total="disasterCount"></el-pagination>
</template>

2，script代码

<script>

export default {

name:'EarthComp',

    data() {
        return {
                pageSize: 1,
                rows: 10,
                currentPage: 1,
                disasterCount:'',
        }
}，

methods: {

            //数据请求
            getdiseaseTypeFn(){
                getdiseaseType({page:this.currentPagea,rows:this.rowsa}).then(res => {
                    this.getdiseaseTypeTable = res.data;
                    this.disasterCounta = res.count;
                });
            },        

          //分页点击
           handleSizeChange (val) {
                this.rows = val;
            },
            handleCurrentChange (val) {
                this.currentPage = val;
                this.getdeviceTypeFn();
            },
}

</script>

效果预览

image.png