美文网首页
2022-09-07 js将一个数组分成多个数组

2022-09-07 js将一个数组分成多个数组

作者: 流泪手心_521 | 来源:发表于2022-09-07 17:43 被阅读0次
//将数组array分成长度为subGroupLength的小数组并返回新数组
//一页5条数据轮播(出库全链路监控)比如一页轮播图上有5条数据,后台返回的接口需要转一下
  group(array, subGroupLength) {
        let index = 0;
        let newArray = [];
        while(index < array.length) {
            newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
  },

//使用

created() {
    this.warpList=this.group(this.listData, 6);
  },

data里面的数据写死的 回头接口好了直接调用接口
listData :[
{ name:'异常单', status:'待处理',num:1685 },
{ name:'发货单', status:'汇波率',num:45 },
{ name:'波次单', status:'打单率',num:8 },
{ name:'拣货单', status:'作业率',num:545 },
{ name:'复核作业', status:'完成率',num:247 },
{ name:'异常单', status:'待处理',num:878 },
{ name:'异常单', status:'待处理',num:555 },
],
//结构



 <div class="circleWarp" style="margin-top:1%; border-top:2px solid #ccc;padding: 0 25px;">
              <Row :gutter="24">
                <Carousel
                  v-model="value3"
                  :autoplay="setting.autoplay"
                  :autoplay-speed="setting.autoplaySpeed"
                  :dots="setting.dots"
                  :radius-dot="setting.radiusDot"
                  :trigger="setting.trigger"
                  :arrow="setting.arrow">
                  <CarouselItem style="padding:0 60px;" v-for="(item,i) in warpList" :key="i">
                         <Col :xl="4" :lg="8" :md="12" :sm="24" :xs="24" style="cursor: pointer;" v-for="(item,index) in item" :key="index"  :class="{'tabs-active': index == queryParams.active}"  @click="tabItemClick(index)" >
                              <Col span="6" style="margin-top:15px;">
                                <div style="font-size:16px;">{{item.name}} </div>
                                <div style="color:rgb(144, 144, 144); padding:15px 0 5px;">{{item.status}}</div> 
                                <div style="font-size:20px;">{{item.num}}</div> 
                              </Col>
                              <Col span="18" style="padding:32px 0;">
                                <Circle :percent="80" 
                                :trail-width="12"
                                :stroke-width="14"
                                :size="60"
                                >
                                <span class="demo-Circle-inner"  style="font-size:24px"></span>
                              </Circle>
                              </Col>
                        </Col>
                  </CarouselItem>
              </Carousel>


                
              </Row>
        </div>

相关文章

网友评论

      本文标题:2022-09-07 js将一个数组分成多个数组

      本文链接:https://www.haomeiwen.com/subject/bnignrtx.html