vue.js - 如何将 v-for 结果排序到多个列表中？

Question

我希望能够将 v-for 结果分成几个这样的列表:

Element 1     Element 5     Element 9
Element 2     Element 6     Element 10
Element 3     Element 7     Element 11
Element 4     Element 8     Element 12

对于从元素 1 到元素 12 的列表(按数字顺序)。

列表的大小可以改变，但它应该始终按 3 列排序(只有行数会改变)。

有可能吗？

Answer 1

可以通过 column-count 实现纯 CSS 解决方案( browser support ):

.columns {
  column-count: 3;
}

<ul class="columns">
  <li>Element 1
  <li>Element 2
  <li>Element 3
  <li>Element 4
  <li>Element 5
  <li>Element 6
  <li>Element 7
  <li>Element 8
  <li>Element 9
  <li>Element 10
  <li>Element 11
  <li>Element 12
</ul>

否则，您可以自己在代码中对元素进行分组并相应地呈现这些组:

new Vue({
  el: '#app',
  
  data: {
    items: [
      'Element 1',
      'Element 2',
      'Element 3',
      'Element 4',
      'Element 5',
      'Element 6',
      'Element 7',
      'Element 8',
      'Element 9',
      'Element 10',
      'Element 11',
      'Element 12',
    ],
  },
  
  computed: {
    groups() {
      // This algorithm may not be the best, but you get the idea
      // (it handles non-divisible column sizes nicely)
      const columns = 3;
      const rows = Math.ceil(this.items.length / columns);
      const groups = Array(columns).fill(0);
      
      for (let i = 0; i < this.items.length; i++) {
        groups[i % columns]++;
      }
      
      let i = 0;
      return groups.map(size => {
        const slice = this.items.slice(i, i + size);
        i += size;
        return slice;
      });
    }
  }
})

.columns {
  display: flex;
}

.column {
  flex-grow: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" class="columns">
  <ul v-for="group of groups" class="column">
    <li v-for="item of group">{{ item }}</li>
  </ul>
</div>