javascript - 有没有办法使用 VueJs 将列表分成几列？

Question

我有一个正在使用 v-for 呈现的列表，我正在将数据输出到一列中。有没有办法在一定的宽度和高度之后，数据流入下一列而不创建任何新数组？这是一个 demo .

new Vue({
  el: '#app',
  data() {
    return {
      lists: [{
          text: 'Item1'
        },
        {
          text: 'Item2'
        },
        {
          text: 'Item3'
        },
        {
          text: 'Item4'
        },
        {
          text: 'Item5'
        },
        {
          text: 'Item6'
        },
        {
          text: 'Item7'
        },
        {
          text: 'Item8'
        },
        {
          text: 'Item9'
        },
      ]
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-layout class="mt-3 ml-4">
      <v-flex md-4>
        <div v-for="list in lists" :key="list.text">
          {{list.text}}
        </div>
      </v-flex>
      <v-flex md4>
        //After a certain width and height, make data flow into this column?
      </v-flex>
    </v-layout>
  </v-app>
</div>

我更喜欢使用宽度和高度而不是创建一个新数组，这样我就不必在整个代码中进行大量手动调整来处理新数组。

Answer 1

您可以使用 CSS 轻松创建列。只需使用 v-for获取屏幕上的内容，然后使用 CSS 对其进行样式设置。在您的情况下，循环将附加多个 <div>元素。这是 CSS 列的示例。

这是最基本的解决方案，其中 column-count: 3将列表分成 3 个相等的列。

.column_wrapper {
  column-count: 3;
}

<div class="column_wrapper">
  <!-- results of <div v-for="item in list"></div>  -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
  <div>Item 11</div>
  <div>Item 12</div>
  <div>Item 13</div>
  <div>Item 14</div>
  <div>Item 15</div>
</div>

此解决方案的缺点是浏览器将始终尝试将列表分成 3 列。如果只希望列在特定高度后拆分，可以使用 flex-box

例如(如果列表长于 200 像素高)

.column_wrapper {
    max-height: 200px;
    display: flex;
    flex-flow: column wrap;
}

<div class="column_wrapper">
  <!-- results of <div v-for="item in list"></div>  -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
  <div>Item 11</div>
  <div>Item 12</div>
  <div>Item 13</div>
  <div>Item 14</div>
  <div>Item 15</div>
</div>

注意:在这两个示例中，拆分的位置是任意的(因为在浏览器中决定何时移动到下一列)。如果您需要决定它在哪里中断，为 vue 中的每一列创建一个新数组是您最好的选择。