Vue 通过公共字段，拼接两个对象数组

兮川

已于 2022-11-08 13:01:44 修改

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Vue拼接对象

于 2018-12-27 09:52:41 首次发布

本文链接：https://blog.youkuaiyun.com/zc_ad/article/details/85272846

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在前端展示工资项与工资值的方法，通过Vue和Element UI实现工资数据的拼接与展示，解决了后台数据分开返回的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端需要展示两个字段，工资项与工资值。因为后台数据原因，后端是将这两个数据分开返回，这边我需要将这两个数组拼接到一个数据。

直接上代码。

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;
                        }
                    }
                }
            }
        }
    })