一维数组转化为二维数据

参考链接:https://blog.csdn.net/dengfangfang11/article/details/80433318
1.接口返回的数据:

image.png

2.变成二维数组

    // 经营类型
    countByTradeCategoryApi().then((res) => {
      if (res && res.data) {
        this.businessTypeList = res.data;
        let len = this.businessTypeList.length;
        let n = 3;
        let lineNum = len % 3 === 0 ? len / 3 : Math.floor(len / 3 + 1);
        let tempType = [];
        for (let i = 0; i < lineNum; i++) {
          // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
          let temp = this.businessTypeList.slice(i * n, i * n + n);
          tempType.push(JSON.parse(JSON.stringify(temp)));
        }
        this.changeBusinessTypeList = tempType;
      }
    });

3.渲染在页面上

       <div class="people-container" v-if="changeBusinessTypeList.length>0" >
          <!-- <div class="case-item" v-for="(item,index) in businessTypeList" :key="index">
            <p class="case-item-num1">{{ String(item.count).replace(/(\d)(?=(\d{3})+$)/g, "$1,") }}</p>
            <p class="case-item-num2">{{item.tradeCategory}}</p>
          </div> -->
          <autoScroll>
            <template #forwardContent>
              <div class="people-item" :key="index" v-for="(item,index) in changeBusinessTypeList">
                <div class="case-item">
                  <p class="case-item-num1">{{item[0]?String(item[0].count).replace(/(\d)(?=(\d{3})+$)/g, "$1,"):''}}</p>
                  <p class="case-item-num2">{{item[0]?item[0].tradeCategory:''}}</p>
                </div>
                <div class="case-item">
                  <p class="case-item-num1">{{item[1]?String(item[1].count).replace(/(\d)(?=(\d{3})+$)/g, "$1,"):''}}</p>
                  <p class="case-item-num2">{{item[1]?item[1].tradeCategory:''}}</p>
                </div>
                <div class="case-item">
                  <p class="case-item-num1">{{item[2]?String(item[2].count).replace(/(\d)(?=(\d{3})+$)/g, "$1,"):''}}</p>
                  <p class="case-item-num2">{{item[2]?item[2].tradeCategory:''}}</p>
                </div>
              </div>
            </template>
          </autoScroll>
        </div>