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



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
		})
	})
},

加载数据部分

你可能感兴趣的:(前端基础)