Vue 通過(guò)公共字段,拼接兩個(gè)對(duì)象數(shù)組的實(shí)例
更新時(shí)間：2019年11月07日 15:53:59 作者：兮川
今天小編就為大家分享一篇Vue 通過(guò)公共字段,拼接兩個(gè)對(duì)象數(shù)組的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
前端需要展示兩個(gè)字段，工資項(xiàng)與工資值。因?yàn)楹笈_(tái)數(shù)據(jù)原因，后端是將這兩個(gè)數(shù)據(jù)分開返回，這邊我需要將這兩個(gè)數(shù)組拼接到一個(gè)數(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="工資項(xiàng):">
</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:[ //工資項(xiàng)列表
{
name:"工資",
value:"wage1"
},{
name:"獎(jiǎng)金",
value:"wage2"
},{
name:"mate金",
value:"wage3"
}
]
},
mounted(){
this.jointData();
console.log(this.salaryCols);
},
methods: {
//將 工資拼接到工資項(xiàng)中農(nóng)
jointData(){
var colLength = this.salaryCols.length; //工資項(xiàng)長(zhǎng)度
var salaryLength = this.salary.length; //工資長(zhǎng)度
//先遍歷工資項(xiàng)
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];
//如果金額取出來(lái)，不是undefined的話，說(shuō)明字段對(duì)應(yīng)起來(lái)的
if (amount !== undefined){
this.salaryCols[i].amount = amount;
break;
}
}
}
}
}
})
3. 效果
以上這篇Vue 通過(guò)公共字段,拼接兩個(gè)對(duì)象數(shù)組的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中axios的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
form-create 是一個(gè)可以通過(guò) JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。本文給大家簡(jiǎn)單介紹了VueJS U取得RL 參數(shù)值的方法，詳細(xì)給大家介紹了vue自定義表單生成器可根據(jù)json參數(shù)動(dòng)態(tài)生成表單效果，感興趣的朋友一起看看吧2019-07-07
說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
不過(guò) Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計(jì)概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于如何重置vue打印變量顯示方式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-12-12
Vue利用dayjs封裝實(shí)現(xiàn)時(shí)間實(shí)時(shí)刷新
Day.js庫(kù)本身專注于簡(jiǎn)化JavaScript日期和時(shí)間的操作,它的API設(shè)計(jì)直觀,且功能強(qiáng)大,可以方便地格式化日期、添加或減去時(shí)間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實(shí)現(xiàn)時(shí)間實(shí)時(shí)刷新,需要的朋友可以參考下2024-07-07
解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題方法
今天小編就為大家分享一篇解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08