有没有办法使用 VueJs 将列表分成列？答案

【问题标题】：is there a way to break list into columns using VueJs?有没有办法使用 VueJs 将列表分成列？
【发布时间】：2020-03-14 02:06:39
【问题描述】：

我有一个使用 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>

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

【问题讨论】：

如果您的列表具有固定高度，则有多种解决方案。例如，Flex 列和包装。
我实际上没有设置固定高度，所以我实际上会选择最简单可行的选项。
最简单的解决方案与 Vue 无关。只需使用 CSS 来修改布局。您不需要创建新数组，除非您想在确切的位置拆分列（例如，在以 A 开头的最后一项之后）。
@BryceHowitson 这是有道理的。我以为我必须用 Vue 做这件事，哈哈。感谢您的提示。
您需要 CSS 方面的帮助吗？我会删除第二个 v-flex 并将第一个转换为带有类的包装器，以使您的标记更易于设置样式。

标签： javascript css vue.js vuetify.js

【解决方案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 中为每一列创建一个新数组是你最好的选择。

【讨论】：