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中axios的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
form-create 是一個可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗證和提交功能的表單生成器。本文給大家簡單介紹了VueJS U取得RL 參數(shù)值的方法，詳細給大家介紹了vue自定義表單生成器可根據(jù)json參數(shù)動態(tài)生成表單效果，感興趣的朋友一起看看吧2019-07-07
說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue恢復初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于如何重置vue打印變量顯示方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
Day.js庫本身專注于簡化JavaScript日期和時間的操作,它的API設(shè)計直觀,且功能強大,可以方便地格式化日期、添加或減去時間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實現(xiàn)時間實時刷新,需要的朋友可以參考下2024-07-07
解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法
今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08