elementui分页传参--当前页-每页显示几条数据

html代码

<el-pagination
                    background
                    style="
                    margin: 50px 0;
                    text-align: center"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

js代码
data数据

data:{
        currentPage: 0,
        total:0,//总条数
        page:1,//初始显示第几页
        pageSize:10,//每页显示多少数据
        dialogVisible: false
    },

js代码
methods
注意：getTabelInfo()也要在 mounted()调用

    methods: {
        handleSizeChange(val) {
            this.pageSize=val;
            this.getTabelInfo();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
        //当前为第几页时调用getTabelInfo()显示第几页数据
            this.page=val;
            this.currentPage=val;
            this.getTabelInfo();
            console.log(`当前页: ${val}`)
        },
        getTabelInfo(){
            let _that = this;
            PageNum=_that._data.page;//当前页
            PageSize=_that._data.pageSize;//每页显示几条数据
            axios.get('url', {
                params : { //请求参数
                    pageNum:PageNum,
                    pageSize:PageSize,
                }
            }).then(function(response){
                _that.tableData=response.data.object.list//将后台传递的数组赋值给定义的空数组
                _that.total=response.data.object.total
            }).catch(function(response){
                console.log(response);//发生错误时执行的代码
            })
        },
    }

分页效果，每页显示多少数据就完成啦！！！

本文地址：https://blog.csdn.net/weixin_42699659/article/details/107376814