Vue 渲染的方式，5个一行 到了5行自动在下一行显示，怎么实现呢？

Question

效果图

传回来的数据如下

              let arr = [
                    {id:1,name:"1号机组",value:100},
                    {id:2,name:"2号机组",value:1},
                    {id:3,name:"3号机组",value:0},
                    {id:4,name:"4号机组",value:15},
                    {id:5,name:"5号机组",value:120},
                    {id:6,name:"6号机组",value:13},
                    {id:7,name:"7号机组",value:1021},
                    {id:8,name:"8号机组",value:11},
                    {id:9,name:"9号机组",value:102},
                    {id:10,name:"10号机组",value:110},
                    {id:11,name:"11号机组",value:180},
                    {id:12,name:"12号机组",value:190},
                    {id:13,name:"13号机组",value:104},
                    {id:14,name:"14号机组",value:102},
                    {id:15,name:"15号机组",value:110},
                    {id:16,name:"16号机组",value:210},
                    {id:17,name:"17号机组",value:310}
                 ];

5个元素一行，每行最开始的 机组和负荷 是固定的

我的html结构是

            <nav>
            <div class="zhanwei"></div>
            <div class="div_ulall">
                <ul class="ul_one">
                    <li>机组</li>
                    <li>1号机组</li>
                    <li>2号机组</li>
                    <li>3号机组</li>
                    <li>4号机组</li>
                    <li>5号机组</li>
                </ul>
                <ul class="ul_one">
                    <li class="li_bottom">负荷</li>
                    <li class="li_bottom">55</li>
                    <li class="li_bottom">55</li>
                    <li class="li_bottom">66</li>
                    <li class="li_bottom">656</li>
                    <li class="li_bottom">666</li>
                </ul>
            </div>
        </nav>

我想实现的就是 每5个元素一行，然后多出的在下一行显示（有时候传递回来的不是5的倍数，可能是17个、3个之类的）

Answer 1

本来还说 flex 就可以做的，但是你这个每一行前面还有个机组负荷
那其实可以把 arr 的一维数组先转成二维的，然后再在 vue 里面渲染：

const arr2 = arr1.reduce((pre, next, idx) => { // reduce 用来便利数组，具体语法就 rtfm 吧
  const inner = pre[~~(idx / 5)]               // ~~用来取整，inner 是内层数组
  if (inner !== undefined) {                   // 判断有没有内层数组
    inner.push(next)                           // 如果有就把遍历的值 next push 到内层数组里
  } else {
    pre.push([next])                           // 没有就新建一个包含 next 的数组，作为内层数组
  }
  return pre
}, [[]])

这样就得到了

[
  [
    { id: 1, name: '1号机组', value: 100 },
    { id: 2, name: '2号机组', value: 1 },
    { id: 3, name: '3号机组', value: 0 },
    { id: 4, name: '4号机组', value: 15 },
    { id: 5, name: '5号机组', value: 120 }
  ],
  [ 
    { id: 6, name: '6号机组', value: 13 },
    { id: 7, name: '7号机组', value: 1021 },
    { id: 8, name: '8号机组', value: 11 },
    { id: 9, name: '9号机组', value: 102 },
    { id: 10, name: '10号机组', value: 110 }
  ],
  [ 
    { id: 11, name: '11号机组', value: 180 },
    { id: 12, name: '12号机组', value: 190 },
    { id: 13, name: '13号机组', value: 104 },
    { id: 14, name: '14号机组', value: 102 },
    { id: 15, name: '15号机组', value: 110 }
  ],
  [
    { id: 16, name: '16号机组', value: 210 },
    { id: 17, name: '17号机组', value: 310 }
  ]
]

然后嵌套的两个 v-for 就行了呀～

Answer 2

让后端把接口返回的数据格式改一下，或者前端重新把数据格式转一下。

[
    [{},{},{},{},{}],
    [{},{},{},{},{}],
    [{},{}]
]

Answer 3

var newArr = [];
for(var i=0，idx=-1;i<arr.length;i++){
  i%5==0&&(idx++);
  if(Object.prototype.toString.call(newArr[idx])!='[object Array]')
    newArr[idx]=[];
  newArr[idx].push(arr[i]);
}

Answer 4

我的思路是把接收到的参数先按照5个一组分组(最后一组可以少于5个)，然后再用两个v-for循环实现功能