Vue 通过公共字段,拼接两个对象数组的实例


Posted in Javascript onNovember 07, 2019

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

直接上代码。

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" 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: {
      //将 工资拼接到工资项中农
      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. 效果

Vue 通过公共字段,拼接两个对象数组的实例

以上这篇Vue 通过公共字段,拼接两个对象数组的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
angular实现form验证实例代码
Jan 17 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
vue之a-table中实现清空选中的数据
Nov 07 #Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 #Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 #jQuery
ElementUI多个子组件表单的校验管理实现
Nov 07 #Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 #Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 #Javascript
vue 实现单选框设置默认选中值
Nov 07 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php eval函数一句话木马代码
2015/05/21 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
python实现的重启关机程序实例
2014/08/21 Python
Django中处理出错页面的方法
2015/07/15 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
numpy返回array中元素的index方法
2018/06/27 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python字符串的index和find的区别详解
2020/06/20 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
装饰活动策划方案
2014/02/11 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers