美文网首页
ant design vue实现分页

ant design vue实现分页

作者: 壹家全栈 | 来源:发表于2020-12-11 16:22 被阅读0次

    如果我们是table分页,需要设置一下这个属性:

    :pagination="false"

    我们不用table自带的分页。

    实现思路:

    在data里面定义

    data() {

        return {

            total:0,

            pageIndex:1,

            pageSize:10

        }

    }

    分页必要参数有:total(总数,需要后台提供,再给你的list赋值的时候给total赋值即可)、pageSize(每页显示的条数)、pageIndex(当前页码),

    <a-pagination :pageSize='pageSize' v-model="pageIndex" @change="pageChange" :total="total" show-less-items />

    在pageChange函数里面,给当前页赋值,并且去执行查询列表函数

    pageChange(current){

            this.pageIndex=current;

            this.getList();//给当前页赋值之后,自然是要去查询

    }

    相关文章

      网友评论

          本文标题:ant design vue实现分页

          本文链接:https://www.haomeiwen.com/subject/jdgjgktx.html