elementUI 分页组件的使用 - 踩坑篇

时间：2024-03-18 21:36:43

elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面：（踩坑一则）

因每个公司 / 每个项目 / 客户需求 / 都各有差异，所以本例只是demo说解，并非举一反三或万能分页；
但是传统的客户需求还是完全能够通用和满足的。

一、分页效果图

elementUI 分页组件的使用 - 踩坑篇

二、elementUI 分页组件的使用 - 应用篇


<!-- 分页组件 -->
<div class="pageturn">
	<el-pagination
		background
		@size-change="pageSizeChange"
		@current-change="pageCurrentChange"
		:current-page="pageform.pageNum"
		pager-count="5"
		:page-sizes="pageform.pageSizes"
		:page-size="pageform.pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="pageform.total">
	</el-pagination>
	<!-- <div style="color:#333;padding:10px 0;">共 {{pageform.pages}} 页 
		&nbsp;&nbsp; 上一页是第:{{pageform.navigateFirstPage}} 页 
		&nbsp;&nbsp; 下一页是第:{{pageform.navigateLastPage}} 页 
	</div> -->
</div>

三、注意：

在上图所示返回的data里面，有定义[5条/页]显示规则的数据，这个数据格式是个数字数组。
为了让现实分页显示&&功能都能够正常，需要前端初始化手动定义设置：默认为后台定义的数字数组的第一个 值，也就是数组第一项5，如下图所示。

elementUI 分页组件的使用 - 踩坑篇
即：如上图箭头所示。

注意：

再结合下面的代码pageform.pageSize的设置，你就应该可以理解了。
我一开始没有这么设置，直接导致显示的效果不正常。


export default {
	name: 'searchMain',
    data() {
        return {
				// 分页插件		
				pageform: {
					total: 200, // 总条目数
					pages: 5,  // 总页数
					pageNum: 1, // 当前的页码
					pageSizes: [5,10,15,20,30,40,50], // select选项设置：条/页
					pageSize: 5, // 每页显示条目个数
					navigateFirstPage: 1, // 上一页
					navigateLastPage: 3, // 下一页
					lastPage: false, // 是最后一页？
					firstPage: false, // 是第一页？
					hasNextPage: true, // 有下一页？
					hasPreviousPage: true // 有上一页？
				},	
         }
	},
	methods: {
			/* 分页插件 */
			// pageSize (每页显示条目个数)改变时会触发 
      		pageSizeChange(val,e,form,jobExpLabel,pageform,searchVal) {
      		    // console.log('每页'+val+'条');
				this.pageform.pageSize = val;
				console.log("设置:"+this.pageform.pageSize+"条/页");

				// this.getresume();
				this.conditionalQueryAxiosFun();
			},
			// pageNum (当前页数)改变时会触发 
     		pageCurrentChange(val,e,form,jobExpLabel,pageform,searchVal) {
				// console.log('当前页:'+ val);
				this.pageform.pageNum = val;
				console.log("当前页数:"+this.pageform.pageNum);

				// this.getresume();
				this.conditionalQueryAxiosFun();
			},
	}

// 条件查询 异步请求
conditionalQueryAxiosFun(e,form,jobExpLabel,pageform,searchVal){

//  · 省略 · 大部分前端页面收集数据&&处理 · 省略 · 不再赘述

		axios.post( serverPath + '/searchResume/',		
			{
				"fuzzySearch": this.searchVal, // 搜索文本框 取值
	
				// 右侧边栏：条件查询
				"jobIntention": this.form.jobHot, //房产销售
				"location": this.form.radioarea, //经开区
				// 工作经验
				"startSeniority": jobStart,
				"endSeniority": jobEnd,
				// 薪资
				"startSalaryExp": payStart, // this.form.payLow
				"endSalaryExp": payEnd, // this.form.payHigh
				// 教育经历
				"startEducation": eduStart, // this.form.educationLow
				"endEducation": eduEnd, // this.form.educationHigh
				"sex": sexStart,
				// 求职状态
				"wantedState": this.form.checkVal,//  [1,2,3]
			
			/* 分页组件API对接 */
			"total": this.pageform.total, // 总条目数
			'pageNum': this.pageform.pageNum, // 当前页码
			'pageSizes': this.pageform.pageSizes, // select选项设置：条/页
			'pageSize': this.pageform.pageSize, // 每页显示条目数
			"pages": this.pageform.page,  // 总页数
			"navigateFirstPage": this.pageform.navigateFirstPage, // 上一页
			"navigateLastPage": this.pageform.navigateLastPage, // 下一页
			"lastPage": false, // 是最后一页？
			"firstPage": false, // 是第一页？
			"hasNextPage": true, // 有下一页？
			"hasPreviousPage": true // 有上一页？
			},
			{
				headers: {
					'Content-Type':'application/json',
					'Authorization': key
				}
			},
		)
		.then(function (response) {
				if (response.data.code == "2050"){
					/*
						this.$message({
							type: 'warning',
							message: response.data.message
						}); 
					*/
						this.$alert(response.data.message, '提示', {
							confirmButtonText: '确定',
							type: 'warning',
							callback: action => {
								this.$message({
									type: 'warning',
									message: '更换查询条件试试'
								});
							}
						});   
						$("#cardbox").hide();
						$(".pageturn").hide();
				}	
				if (response.data.code == "200"){
						this.$message({
							type: 'warning',
							message: response.data.message
						});       
						$("#cardbox").show();
						$(".pageturn").show();
	
						this.resumes = response.data.data.resumes;
						/*  同步初始化渲染：分页组件渲染 */ 
						// 获取分页数据
						this.pageInfo = response.data.data.pageInfo; 
						// 获取分页数据之后，立刻渲染
						this.pageform.pageSizes = this.pageInfo.pageSizes;
						this.pageform.pageSize = this.pageInfo.pageSize;
						this.pageform.pageNum = this.pageInfo.pageNum;
						this.pageform.total = this.pageInfo.total;
						this.pageform.pages = this.pageInfo.pages;
				}
			
				localStorage.setItem("token",response.headers.authorization); // token 复写本地 localStorage
				
		}.bind(this))
		.catch(function (error) {
			
			// this.$message({
			// 	type: 'success',
			// 	message: "请求失败"+error
			// });
				
		});	
	}


}

四、将服务端返回的data数据进行同步初始化渲染

结合上面的代码，你会发现，最后一步就是：页面需要将服务端返回的data数据进行同步初始化渲染。

五、作者自留·备注：

具体文件代码，参考对应项目文件：src/component/search/searchMain.vue文件

以上就是关于“ elementUI 分页组件的使用 - 踩坑篇 ” 的全部内容。

相关文章