Vue 通過公共字段,拼接兩個對象數(shù)組的實例
更新時間：2019年11月07日 15:53:59 作者：兮川
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個對象數(shù)組的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
前端需要展示兩個字段，工資項與工資值。因為后臺數(shù)據(jù)原因，后端是將這兩個數(shù)據(jù)分開返回，這邊我需要將這兩個數(shù)組拼接到一個數(shù)據(jù)。
直接上代碼。
1.HTML部分
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>工資查詢</title>
<link rel="stylesheet" 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: {
//將 工資拼接到工資項中農(nóng)
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的話，說明字段對應(yīng)起來的
if (amount !== undefined){
this.salaryCols[i].amount = amount;
break;
}
}
}
}
}
})
3. 效果
以上這篇Vue 通過公共字段,拼接兩個對象數(shù)組的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue結(jié)合echarts實現(xiàn)繪制水滴圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實現(xiàn)水滴圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
Vue el-table復(fù)選框全部勾選及勾選回顯功能實現(xiàn)
這篇文章主要介紹了Vue el-table復(fù)選框全部勾選及勾選回顯功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
最近學(xué)習(xí)了Vue3,利用vue3做了個好玩的項目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue element 表頭添加斜線的實現(xiàn)代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
vue實現(xiàn)導(dǎo)入json解析成動態(tài)el-table樹表格
本文主要介紹了vue實現(xiàn)導(dǎo)入json解析成動態(tài)el-table樹表格，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
解析使用useDark(),發(fā)現(xiàn)transition?動畫失效
這篇文章主要為大家介紹了使用useDark(),發(fā)現(xiàn)transition動畫失效的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解
這篇文章主要為大家介紹了Vue 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue 2.5.2下axios + express 本地請求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請求404的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在項目開發(fā)中,我們經(jīng)常會封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊全局組件,感興趣的小伙伴可以了解下2024-01-01