ant design vue实现分页

2020-12-11  本文已影响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();//给当前页赋值之后,自然是要去查询

}

上一篇下一篇

猜你喜欢

热点阅读