Vue 通過公共欄位，拼接兩個物件陣列
阿新 • • 發佈：2018-12-29
前端需要展示兩個欄位，工資項與工資值。因為後臺資料原因，後端是將這兩個資料分開返回，這邊我需要將這兩個陣列拼接到一個數據。
直接上程式碼。
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"> <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.效果
