Vue多个数组合并成一个，分别根据数据返回状态显示不同的状态图片

1.首先根据类型判断
2.根据类型判断状态
3.显示图片

	<el-scrollbar style="height:200px;">
        <div v-for="(item,index) in chartData.meterList" :key="index">
          <div>
            <div style="width: 100px; height: 100px; background-color: #000000;">
              //根据类型，根据类型里的状态
              <img :src="chartData.imgObj[item._type][item.event_state]" />
            </div>
            {{ item.meter_name }}
            {{ item.state }}
          </div>
        </div>
      </el-scrollbar>

多个数组合并，添加不同状态

 export default {
   data() {
     return {
       chartData: {
         meterList: [],
         //door状态，如果状态值是1，2，可以把第一个' '去掉，若果是从零开始的就需要加上
         imgObj: {
           door: ['', require('@/assets/img/door0.png'), require('@/assets/img/door1.png')],
           smog: '',
         }
       },

     }
   },
   methods: {
     getNewMonitor() {
       getNewMonitor({
         station_id: this.station_id,
         time: this.curDate
       }).then(res => {
         if (res.result === 1) {
           this.chartData.meterList = [...res.data.doorList.map(i => ({
             ...i,
             _type: 'door'
           })), ...res.data.smogList.map(i => ({
             ...i,
             _type: 'smog'
           }))];
         } else {
           console.log(2)
         }
       })
     }
   }
 }

问题描述

问题背景描述:
最近在做的一个项目:由于是我们前端要显示的数据是从别人平台查询出来的，我们只提供查询参数，和向他们发起查询请求，其他的任何东西都不是我们操作的，而他们返回呢直接放回一个二维数组，而且还是全中文返回，英文的字段…

这个前端 是由我来负责的 所以我来吐槽!!!!一下他们肯定是懒得写文档给
调用方解释这个字段什么什么意思，所以直接返回给调用方中文格式了
我们的后台其实也是可以转的，但是后台没转，直接给前端来转...
fuck（响应端）

模拟返回数据格式
给你们模拟下他们返回的数据格式：

{
  "error": 0,
  "description": "成功",
  "value": [
    {
      "tableName": "",
      "tableCnName": "",
      "deptId": "",
      "deptName": "",
      "columnCount": 17,
      "rowCount": 5416,
      "columns": [
        "身份证件号码",
        "姓名",
        "出生日期",
        "工作单位",
        "发放周期",
        "123类型",
        "发放标准",
        "始发年月",
        "终止年月",
        "123日期",
        "手机号码",
        "镇街",
        "来源",
        "更新时间",
        "是否监督对象",
        "多发周期",
        "多发金额"
      ],
      "rows": [
        [
          "4XXX68219XXXXXXX",
          "张三",
          "1913-02-02",
          null,
          " ",
          "模拟",
          150,
          "2010-07-01",
          "2012-07-01",
          "2010-08-08",
          null,
          "天津",
          "123发放表",
          "2019-05-10",
          null,
          23,
          3450
        ],
        [
          "4XXX68219XXXXXXX",
          "陈秀华",
          "1939-07-14",
          null,
          " ",
          "模拟",
          30,
          "2013-10-01",
          "2016-09-01",
          "2016-07-29",
          null,
          "北京",
          "123发放表",
          "2019-02-18",
          null,
          2,
          60
        ]
      ]
    }
  ]
}

我们前端用的是Layui的数据表格，这种格式Layui数据表格不能自动解析…Layui能解析的是[{}],这种对象数组键值对格式… 害 疫情在此 我也不敢多比比划划。行吧 还是我来解决吧！

两个数组转成一个键值对数组

因为很多页面需要用到，所以我写了个通用的

**
 * @effect 解析政数局返回的数据格式给layui的数据表格渲染
 * @param data 数组 
 * return [{...}]
 */
function GovernmentData (data) {
    if (!$.isArray(data)) {
        console.log(`传入的${data}不是数组`);
        return;
    }

    if (data.length <= 0) {
        console.log(`传入的${data}不能为空`);
        return;
    }

    let tableArrayObj = [];
    // 获取传进来的数组里面的属性
	for (let i = 0; i < data.length; i++) {  
	// 保证每个值都能被改造成键值对
		for (let j = 0; j < data[i].rows.length; j++) {
			let tableObj = {};
			// 开始改造，获取行列值的每一项，和行列名的每一项
			for (let k = i; k < data[j].rows[j].length; k++) {
				// 这句话的意思是 tableObj['列名'] = '列值'
				tableObj[data[i].columns[k]] = data[i].rows[j][k];
			}
			// 上面循环完就是行值和行列名匹配完成
			// 既然完成了直接push进去
			tableArrayObj.push(tableObj);
		}
	}
	// 我们这个是页面之间共用的 直接返回给调用方
	// 返回格式已成 [{},{},{},{}],,这样
    return tableArrayObj;
} 

至此收工.

改天配上图来，现在在家写的这篇文章，连不上他们的内网，拿不到数据，但我保证这些代码你贴上去保证就能用了！

数组里面有对象，对象里面有数组

经过上面代码改造为：

有用的话记得点赞哦!!!