1.分页组件1UI展示:

分页1.png

2.组件调用

html代码：

<pagination
                         //总条数大于0展示分页组件，必填
                         v-show="total-0>0" 
                         //是否滚动
                         :auto-scroll="autoScroll1"
                         //总条数，一般ajax获取，必填
                         :total="total-0"
                         //pageNum表示第几页，必填
                         :page.sync="pageNum" 
                         //pageSize表示一页展示的条数，必填
                         :limit.sync="pageSize"
                         //获取数据的ajax函数，必填
                         @pagination="ajaxfuctionname" />

js代码：

data() {
 return {
     total：0,
     autoScroll1：true,
     pageNum: 1,
     pageSize: 10,
 }
}
methods: {
 ajaxfuctionname() {
     this.Loading = true this.ajaxfuction(this.listQuery).then(value = >{
         //获取表格数据
         this.tableData = value.data
         //获取总条数
         this.total = value.total setTimeout(() = >{
             this.Loading = false
         },
         300)
     })
 },
}