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)
})
},
}
1.分页组件2UI展示:
分页组件2.png
