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

Posted 2023-02-22

【中文标题】有没有办法使用 VueJs 将列表分成列？

【英文标题】：is there a way to break list into columns using 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 并将第一个转换为带有类的包装器，以使您的标记更易于设置样式。

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