antd design 表格自带分页器实现后端分页

<a-table :columns="columns" 
			:dataSource="data" 
			:pagination="pagination"
			@change="TableChange"
			rowKey="id"
		>

</a-table>

HTML部分↑

pagination:{
	defaultPageSize:10,
	showTotal: total => `共${total}条数据`,
	// showSizeChanger:true,
	// pageSizeOptions: ['5', '10', '15', '20'],
	onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
	total:0 //总条数
},

data仓储部分↑

TableChange(e){
	this.data = [];
	let temp = {};
	temp.pageNum = e.current;
	temp.pageSize = e.pageSize;
	loadData( temp ).then((res)=>{
		if( res.status == 200 ){
			for (const val of res.data.list) {
				val.updateTime = moment(val.updateTime).format("lll")
				this.data.push(val)
			}
			this.pagination.total = res.data.total;
			return res.data.total
		}else{
			this.$notification['error']({
				message: '错误',
				description: res.err,
				duration: 4
			})
		}
	})
	.catch((err) => {
		this.$notification['error']({
			message: '错误',
			description: err.msg,
			duration: 4
		})
	})
},

加载数据部分

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值