js 前端数据关联

需求:通过2个ajax请求返回2个数组
table需要展示 userList的userName,和deviceList的 name。

userList:[
	{
		id:1,
		userName:'lllsj'
	},
	{
		id:2,
		userName:'cccy'
	}]

deviceList:[
	{
		id:11,
		name:'设备1',
		tempName:''
	},
	{
		id:22,
		name:'设备2'
		tempName:''
	}]

思路:把userList下的userName 赋给 deviceList的 tempName.
即:展示的数据为 deviceList下的 name 和tempName.

data(){
	return{
		userMap:{}
	}
}

this.userList.forEach(item=>{
	userMap[item.id]=item.userName;
})

即userMap:{}
被改变为:
userMap:{
	1:lllsj,
	2:cccy
}

this.deviceList.forEach(item=>{
	// item.tempName=this.userMap[item.id]
	// 2种方式都可以,vue推荐使用第二种,涉及到DOM渲染问题
	this.$set(item, "tempName", this.userMap[item.id]);
})

即deviceList 变为:
deviceList:[
	{
		id:11,
		name:'设备1',
		tempName:'lllsj'
	},
	{
		id:22,
		name:'设备2'
		tempName:'cccy'
	}]

之后就是简单的table 取到 :data=deviceList
就ok了