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 相关文章推荐
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
js和jquery中获取非行间样式
May 05 jQuery
Vue实现自定义下拉菜单功能
Jul 16 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
小程序实现密码输入框
Nov 16 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
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python实现井字棋小游戏
2020/03/09 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
精伦电子Java笔试题
2013/01/16 面试题
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Nginx的基本概念和原理
2022/03/21 Servers