标签：arr vue temp type value 数组 类型 多种类型 数据

一、需求

如题所示，根据类型，合并接口返回的数据，相同类型的数据相加即可。

接口返回list数组：

我们可以看到caseStatus这个字段有很多类型，但是我们最终的需求是合并成6种类型。如果有哪种类型接口没返回的话，我们给补0

最终UI效果：

二 、目的：根据caseStatus进行分组，相同组的把他们的count相加

1. 需要循环list，取出每一项的caseStatus，需要判断属于哪种类型（6种），相同类型的相加
2. 怎么知道caseStatus对应的类型是哪个？====》因此新建mapList存储类型关系
3. 前端把接口返回的数据进行分类；双层for循环，拿接口返回的第1条，去mapList数组里比对符合哪一个类型；不符合继续取接口返回的第2，3，4…条继续比对

三 、 过程：

1. 循环list数组，取出caseStatus；===》循环mapList数组，取出value数组
2. 判断caseStatus是否在value数组中，
3. 如果在的话，判断临时数组中是否有该类型的索引type
4. 如果存在，则count相加；否则存储item到临时数组中（相当于在数组中占位，这样就会有索引），索引为该类型的type
5. 下次循环如果caseStatus还在该类型中，此时数组有该类型的type索引，直接count相加即可

四、具体代码：

export default {
  data() {
    return {
      typeList: [
        // { caseStatus: 0, caseStatusName: "类型xxx", count: "9" },
      ],
      mapList: [ //mapList存储类型关系
        { type: '0', name: '类型1', value: '0,1,2,3,5' },
        {
          type: '1',
          name: '类型2',
          value: '100,101,107,110,115,120,130,140,150,160,190',
        },
        { type: '2', name: '类型3', value: '21,22,23' },
        { type: '3', name: '类型4', value: '31,32,33,34,38,39' },
        {
          type: '4',
          name: '类型5',
          value: '40,41,42,43,44,45,46,47,48,49,50,51,52,53',
        },
        { type: '5', name: '类型6', value: '4' },
      ],
    }
  },
caseStatistics() {
      mainApi['xxxxxx']({
        batchNo: this.batch_no,
      })
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.datas.totalCount <= 0) {
              this.isShow = false
            }
            var list = res.data.datas.list  //接口返回的数据列表
            let temp_arr = []  //定义临时数组
            for (let item of list) {  //双层for循环，拿接口返回的第一条，去mapList数组里比对符合哪一个类型；符合执行下面的操作，不符合继续取接口返回的第2，3，4...条继续比对
              //如果temp_arr存在item.type 这个索引，那么count相加
              //console.log('外')
              for (let map of this.mapList) {
                //console.log('内')
                var values_arr = map.value.split(',') //把value分割成数组
                var item_str = item.caseStatus + '' //转换成字符串
                var name = map.name
                var type = map.type  //取循环mapList数组中的某一条的type
                if (values_arr.includes(item_str)) {  //[0,1,2,3,5].includes(0)
                  //判断 temp_arr是否有type这个索引;主要就是靠这个type来区分类型，进行count相加
                  if (temp_arr[type]) {
                    temp_arr[type].count += item.count
                  } else {
                    //没有type这个索引，就给temp_arr赋值；相当于给抽屉先占一个位，才能有索引
                    temp_arr[type] = item
                    temp_arr[type].caseStatusName = name
                    temp_arr[type].caseStatus = map.value
                  }
                }
              }
            }
            // console.log(temp_arr)
            
            //这里循环最终的数组，如果哪一种类型没有的话，给补0
            for (var j = 0; j < 6; j++) {
              //item是undefined的排出掉
              if (temp_arr[j]) {
                this.typeList[j] = temp_arr[j]
              } else { //没有索引的话，count设为0
                var temp_obj = {}
                temp_obj.caseStatus = this.mapList[j].value
                temp_obj.caseStatusName = this.mapList[j].name
                temp_obj.count = 0 //补0操作
                // console.log(temp_obj)
                this.typeList[j] = temp_obj
              }
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },

双层for循环打印结果

打印临时数组 temp_arr

打印临时对象 temp_obj

画的流程图，方便以后看回顾思路

标签：arr,vue,temp,type,value,数组,类型,多种类型,数据
来源： https://blog.csdn.net/weixin_45811256/article/details/118486549

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。