您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue如何通過(guò)公共字段拼接兩個(gè)對(duì)象數(shù)組,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
1.HTML部分
<html lang="zh"> <head> <meta charset="UTF-8"> <title>工資查詢(xún)</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="工資項(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的話(huà),說(shuō)明字段對(duì)應(yīng)起來(lái)的 if (amount !== undefined){ this.salaryCols[i].amount = amount; break; } } } } } })
3. 效果
以上是“Vue如何通過(guò)公共字段拼接兩個(gè)對(duì)象數(shù)組”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。