时间戳

首页 > 解决方案 > 将数组拆分为不同大小的 N 块

arrays - 将数组拆分为不同大小的 N 块

问题描述

我想知道这在 VueJS 中是否可行

我有一个包含 N 个项目的数组，我想将其拆分为不同长度的数组以最终输出类似这样的内容（注意第一行有两列，第二行有 3）

Array = [{"text": "hello"},{"text": "hello1"},{"text": "hello2"},{"text": "hello3"},{"text": "hello4"},{"text": "hello5"},{"text": "hello6"},{"text": "hello7"},{"text": "hello8"}]

<div class="row">
    <div class="col-1-of-2">
       hello
    </div>
    <div class="col-1-of-2">
        hello1
    </div>
</div>
<div class="row">
    <div class="col-1-of-3">
       hello2
    </div>
    <div class="col-1-of-3">
        hello3
    </div>
    <div class="col-1-of-3">
        hello4
    </div>
</div>

并重复

我认为您需要对数组进行分块，但我看到的示例假定 N 长度固定

标签： arraysvue.jsvuejs2

解决方案

处理这个问题的最常见方法是使用计算的。

取数组，并根据需要嵌套（不确定你的规则是 2 然后 3）

然后在模板中使用嵌套循环来显示数据

new Vue({
  el: "#app",
  data() {
    return {
      split: "2,3",
      items: [{"text": "hello"},{"text": "hello1"},{"text": "hello2"},{"text": "hello3"},{"text": "hello4"},{"text": "hello5"},{"text": "hello6"},{"text": "hello7"},{"text": "hello8"},{"text": "hello9"}]
    }
  },
  computed: {
    rows() {
      const { split, items } = this;
			let ret = [];
      let si = 0;
      let ci = 0;
      let splitArr = split.split(',');
      this.items.forEach(item => {
        if(!ret[si]){ret.push([])}
        ret[si][ci] = item
        ci = (ci + 1)
        if (ci >= splitArr[si % splitArr.length]) {
        	ci = 0;
          si++;
        }
        
      })
      return ret
    }
  },
})
.row{
  display: block;
}
.col{
  box-sizing: border-box;
  padding: 10px;
  margin: 2px;
  border: 1px solid;
  display: inline-block;
}
.col-1-of-1{
  width: calc(100% - 4px);
}
.col-1-of-2{
  width: calc(50% - 4px);
}
.col-1-of-3{
  width: calc(33.3% - 4px);
}
.col-1-of-4{
  width: calc(25% - 4px);
}
.col-1-of-5{
  width: calc(20% - 4px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div>
    SPLIT: <input v-model="split">
  </div>
  <div class="row" v-for="row in rows">
    <div :class="`col col-1-of-${row.length}`" v-for="col in row">
      {{col.text}}
    </div>
  </div>
</div>

推荐阅读