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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
JS代码编译器Monaco使用方法
Jun 11 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 魔术函数使用说明
2010/02/21 PHP
php 魔术方法详解
2014/11/11 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python项目跨域问题解决方案
2020/06/22 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
授权委托书格式
2014/07/31 职场文书
委托书如何写
2014/08/30 职场文书
新教师个人总结
2015/02/06 职场文书
护理专业自荐信范文
2015/03/06 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
Golang 结构体数据集合
2022/04/22 Golang
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js