Vue通过公共字段，拼接两个对象数组的实例
前端需要展⽰两个字段，⼯资项与⼯资值。因为后台数据原因，后端是将这两个数据分开返回，这边我需要将这两个数组拼接到⼀个数据。
直接上代码。
1.HTML部分
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>⼯资查询</title>
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
<script src="cdn.bootcss/vue/2.5.21/vuemon.dev.js"></script>
<script src="unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="index" >
<el-table
:data="salaryCols"
max-height="450">
<el-table-column
prop="name"
align="center"
label="⼯资项:">
</el-table-column>
<el-table-column
prop="amount"
align="center"
label="⾦额(￥):">
</el-table-column>
</el-table>
</div>
</body>
</html>
2. js部分
new Vue({
el: '#index',
data: {
salary: [  //⼯资列表
{
wage1: 1001.1,
},
{
wage2: 30.3,
},
{
wage3: 200,
}
],
salaryCols:[  //⼯资项列表
{
name:"⼯资",
value:"wage1"
},{
name:"奖⾦",
value:"wage2"
},{
name:"mate⾦",
value:"wage3"
}
]
},
mounted(){
this.jointData();
console.log(this.salaryCols);
},
methods: {
//将⼯资拼接到⼯资项中农
jointData(){
var colLength = this.salaryCols.length;  //⼯资项长度
var salaryLength = this.salary.length;  //⼯资长度
//先遍历⼯资项
for (var i=0; i<colLength; i++){
//取出相同字段value
var value = this.salaryCols[i].value;
//遍历⼯资
for (var j=0; j<salaryLength; j++){
var amount = this.salary[j][value];
//如果⾦额取出来，不是undefined的话，说明字段对应起来的
if (amount !== undefined){
this.salaryCols[i].amount = amount;
break;
}
}
}
}
}
})
3. 效果
js合并两个数组
以上这篇Vue 通过公共字段，拼接两个对象数组的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。