Vue 通过公共字段,拼接两个对象数组的实例
前端需要展示两个字段，工资项与工资值。因为后台数据原因，后端是将这两个数据分开返回，这边我需要将这两个数组拼接到一个数据。
直接上代码。
1.HTML部分
<html lang="zh"> <head> <meta charset="UTF-8"> <title>工资查询</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > <script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js"></script> <script src="https://unpkg.com/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. 效果
以上这篇Vue 通过公共字段,拼接两个对象数组的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
问题内容： 在我多年的编程工作中，我经常创建一些类，这些类仅将一些变量与其设置器和获取器组合在一起。我已经看到了这些类型的对象，这些对象称为值对象，域对象或模型对象，具体取决于使用它们的上下文。通用用法最合适的术语似乎是数据传输对象（DTO）。这描述了仅包含访问器和更改器的POJO。 我刚刚编写了一个这样的对象，其中包含大约五十个用于在图表上设置主题参数的字段。现在，我想知道是否应该将这些字段声明
-
如何过滤下面两个个不同的对象数组？然后展示它们之间不同数据 第一个对象数组： 第二个对象数组： 过滤后找出不同的数据祖晨更新的数组：
-
我的软件上有一个对象列表，我想通过一个公共字段进行排序，例如： 我可以对列表进行排序以使ID=1的对象只出现一次吗？在这种情况下，列表中只剩下ID=1的第一个对象，例如： 我怎样才能做到这一点？
-
问题内容： 我正在尝试整理实现公共接口的对象列表。涉及3个类和1个接口： 社区 类（具有一种方法： List getPeople（）; ） 人员 接口（具有一种方法： String getName（）; ） 女生 班（实施人员） 男生 班（实施人员） 请参见下面的代码。 我想要一个看起来像这样的XML： 或可能： 到目前为止，我得到的是： 我意识到我可以将元素更改为其他名称，但是我希望元素名称成为
-
我们希望基于公共字段（主键）执行Kstream Kstream连接。目前，使用下面的代码，我们得到的结果是只合并了两个流，没有任何主键约束。 您能建议如何根据公共字段/列连接2个流吗。
-
这是我的输入，我有一个数组，其中名称键在多个对象中具有值“Foo1”，因此我希望在单独的数组中相对于“name”键值和其他信息的唯一对象。 下面的数组是唯一的名称键和其他值和状态键从所有匹配的对象存储在new_obj键。