VueJS2结合Bootstrap5开发时如何将数组拆分为3个等长（末位可不等）新数组

核心数组拆分逻辑 #

你可以直接在Vue的计算属性中实现符合要求的数组拆分逻辑，代码如下：

computed: {
  // 拆分后供三列渲染的数组
  splitColumns() {
    // 替换为你的源数据数组变量
    const originList = this.cardData
    const COLUMN_NUM = 3
    // 计算每列最多承载的元素数量，向上取整保证前几列数量均等
    const perColumnMax = Math.ceil(originList.length / COLUMN_NUM)
    const columns = []
    for (let i = 0; i < COLUMN_NUM; i++) {
      const startIdx = i * perColumnMax
      const endIdx = startIdx + perColumnMax
      columns.push(originList.slice(startIdx, endIdx))
    }
    return columns
  }
}

上述逻辑针对你给出的示例源数组[1,2,3,4,5,6,7,8,9,10,11]，返回结果恰好为[[1,2,3,4], [5,6,7,8], [9,10,11]]，完全符合需求。

模板渲染写法 #

对应你给出的HTML结构，直接循环拆分后的数组即可：

<main>
    <div class="container-fluid">
        <div class="row">
           <div class="col-md-9">
                <div class="row">
                      <div class="col-md-4" v-for="(column, colIndex) in splitColumns" :key="colIndex">
                        <article v-for="(card, cardIndex) in column" :key="cardIndex" class="mb-3">
                          <!-- 卡片内部内容 -->
                        </article>
                      </div>
                </div>
           </div>
        <aside class="col-md-3 ml-auto">
           <!-- 侧边栏内容 -->
        </aside>
        </div>
    </div>
</main>

异常问题修复说明 #

1. 卡片排序错误：此前的问题大概率是使用了按索引取模分配的拆分逻辑，会导致卡片横向排序。当前的纵向拆分逻辑可以保证第一列全为靠前的N条数据、第二列为中间N条，完全符合从上到下、从左到右的阅读顺序。
2. 卡片下方空白缺口：给<article>添加mb-3类控制卡片底部间距，三列独立排布的结构不会出现横向对齐导致的不规则空白。

内容的提问来源于stack exchange，提问作者redshift