当前位置： 移动技术网 > 移动技术>移动开发>IOS > elementui分页传参--当前页-每页显示几条数据

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

2020年07月17日  | 移动技术网移动技术  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网