欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-03-11 16:37:31
分页axios的get传参...

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

相关标签: vue