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

2024-10-02 02:21:15

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

直接上代码。

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语法之拼接字符串的示例代码

本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d
详解vue 数组和对象渲染问题

最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后来又以为是因为vuex导致的问题. 最后强制刷新组件解决了问题,但是还没有找到根本问题的所在... 数组更新检测在 vue 中使用数组的push().pop().shift().unshift().splice().sort().reverse() .filter().concat() 方法时,改变数组的同时可以触发视图的变
vue实现将一个数组内的相同数据进行合并

获取服务器传来的数组数据进行,找出其中价格相同的进行数量相加,合并该段数据: /** 先将传来的订单列表进行四舍五入,再将价格相同的订单进行合并 * @param {Object} orderList :要进行操作的订单 */ async mergeOrder(orderList) { console.log(orderList); let contrast_1 = JSON.parse(JSON.stringify(orderList)); for(let x in contrast_1){
vue遍历对象中的数组取值示例

前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=
Vue 通过公共字段,拼接两个对象数组的实例

前端需要展示两个字段,工资项与工资值.因为后台数据原因,后端是将这两个数据分开返回,这边我需要将这两个数组拼接到一个数据. 直接上代码. 1.HTML部分 <html lang="zh"> <head> <meta charset="UTF-8"> <title>工资查询</title> <link rel="stylesheet" href="https://unpkg
Python3合并两个有序数组代码实例

第一种思路,把两个数组合为一个数组然后再排序,问题又回归到冒泡和快排了,没有用到两个数组的有序性.(不好) 第二种思路,循环比较两个有序数组头位元素的大小,并把头元素放到新数组中,从老数组中删掉,直到其中一个数组长度为0.然后再把不为空的老数组中剩下的部分加到新数组的结尾.(好) 第二种思路的排序算法与测试代码如下: def merge_sort(a, b): ret = [] while len(a)>0 and len(b)>0: if a[0] <= b[0]: ret.appen
Django 拼接两个queryset 或是两个不可以相加的对象实例

1.使用 | 直接将两个queryset拼接起来 querysets = one_queryset | two_queryset 2.使用chain拼接 import itertools querysets = itertools.chain(one_queryset,two_queryset) 补充知识:django queryset相加和筛选 1.集合相加 a = {1,2,3} b = {3,4,5} print(type(a)) print(a|b) 2.queryset 符合条件的筛序
Java如何比较两个对象并获取不相等的字段详解

目录写在前面缘起实现使用方法扩展后记写在前面在工作中,我们经常会遇到这样的需求--比较两个对象是否相等,如果不相等的话,取出不相等的字段. 以下这些场景都需要我们对一个对象进行比较: 数据比对做单元测试断言对象是否相等前端要求对不相等的字段进行高亮显示这种需求其实是非常简单的,但是如何优雅地解决这一类需求呢? 通常的做法是重写对象的 equals 方法.但是重写 equals 方法有很多缺点,例如: 每次对象属性有变更,一定要记得再重写(放心,你一定会忘记的) 每个对象
通过JS深度判断两个对象字段相同

代码: /** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj){ return Object.prototype.toString.call(obj)==='[object Object]'; }; /** * 判断此类型是否是Array类型 * @param {Array} arr */ function isArray(arr){ return Object.prototype.toString.call(
SpringBoot Mybatis Plus公共字段自动填充功能

一.应用场景平时在建对象表的时候都会有最后修改时间,最后修改人这两个字段,对于这些大部分表都有的字段,每次在新增和修改的时候都要考虑到这几个字段有没有传进去,很麻烦.mybatisPlus有一个很好的解决方案.也就是公共字段自动填充的功能.一般满足下面条件的字段就可以使用此功能: 这个字段是大部分表都会有的. 这个字段的值是固定的,或则字段值是可以在后台动态获取的. 常用的就是last_update_time,last_update_name这两个字段. 二.配置MybatisPlus 导包:
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容. 第一步,首先新建一个vue+webpack+vuecli的demo,如下操作: 全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令: npm install -g vue-cli 第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作: cd vue_test_project //进入vue_test_
vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c

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

相关推荐

随机推荐