如果你也遇到了前后端分离项目的数据回显的问题下面的案例你可以参考一下
在这里插入图片描述
这是回显接口传过来的数据 我现在需要把这些部分数据回显到指定的页面中

在data中定义

strJson:[{
						stakeHolder:'',//姓名
						department:'',//	部门
						position:'',//	职位
						telephone:'',//	手机号
						stakeHolderType:'',//	类型(字典code):使用字典项接口
						stakeHolderTypeName:'',
						isKeyPerson:'1',//	是否关键人1是,2否
						degreeSupport:'',//	支持程度(字典code):使用字典项接口
						degreeSupportName:'',
						stakeHolerRelation:'',//干系人关系
						stakeHolerRelationName:'',
						planToRelation:'',//计划达成关系
						planToRelationName:'',
						currentKeyPerson:0,
						
					}],//干系人
					

在methods{}中写接口代码

	//添加回显
		lcEcho(){
			
			let data={
				lcId:this.lcId,
				custId:this.custId,
				time:this.currentDate,
			};
			console.log(data);
			uni.request({
				url: this.baseUrl + '/app/lcEdit',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				data:data,
				success: res => {
					console.log(res);
					this.infoArr = res.data.obj.bean;
					this.contactsInfos = res.data.obj.contactsInfos;//接收回显数据
					let that = this;
					if(that.contactsInfos.length>0){
						this.bussForm.strJson=[];
						for(let i=0;i<that.contactsInfos.length;i++){
							let obj={
								stakeHolder:this.contactsInfos[i].contactsName,//姓名
								department:this.contactsInfos[i].deptName,//	部门
								position:this.contactsInfos[i].position,//	职位
								telephone:this.contactsInfos[i].contactsTelephone,//	手机号
								stakeHolderType:'',//	类型(字典code):使用字典项接口
								stakeHolderTypeName:'',
								isKeyPerson:'1',//	是否关键人1是,2否
								degreeSupport:'',//	支持程度(字典code):使用字典项接口
								degreeSupportName:'',
								stakeHolerRelation:'',//干系人关系
								stakeHolerRelationName:'',
								planToRelation:'',//计划达成关系
								planToRelationName:'',
								currentKeyPerson:0,
							}
							this.strJson.push(obj);
							
						};
					}
					
						this.title = this.infoArr.title;
						this.custName = this.infoArr.custName;
						this.custEnName = this.infoArr.custEnName;
						this.custAddr = this.infoArr.custAddr;
						this.lcType = this.infoArr.lcType;
						
						
				},
				fail: () => {
			
				},
				complete: () => {}
			});
			
			
		},	

回显成功的页面效果
在这里插入图片描述
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐