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删除数组元素的函数介绍
Mar 27 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
学习vue.js计算属性
Dec 03 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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
Terran建筑一览
2020/03/14 星际争霸
长波知识介绍
2021/03/01 无线电
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php session 预定义数组
2009/03/16 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
smarty简单应用实例
2015/11/03 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
js 单引号 传递方法
2009/06/22 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
反邪教标语
2014/06/23 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
欠条样本
2015/07/03 职场文书
创业计划书之废品回收
2019/09/26 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs