Vue 动态生成div 实现每10个复选框为一列的布局

实现思路 #

要达成「每10个复选框为一列、横向多列排布」的效果，无需改动原有复选框的交互逻辑，仅需两层适配：

• 将扁平化的复选框数据源按10个为一组拆分，生成嵌套二维结构
• 模板层循环二维结构，每组数据对应独立列容器，配合基础CSS实现横向多列排布

具体代码实现 #

1. 新增动态分组计算属性 #

在组件的script配置中添加计算属性，自动监听options的长度变化，动态计算需要拆分的列数，无需手动维护分组逻辑：

computed: {
  getGroupedOptions() {
    const PER_COLUMN_COUNT = 10 // 每列放置的复选框数量，可根据需要调整
    // 计算总列数，对总数量向上取整，避免最后一列不足10个时被丢弃
    const totalColumn = Math.ceil(this.options.length / PER_COLUMN_COUNT)
    // 按每10个为一组切割数组
    return Array.from({ length: totalColumn }, (_, columnIndex) => {
      const startIndex = columnIndex * PER_COLUMN_COUNT
      return this.options.slice(startIndex, startIndex + PER_COLUMN_COUNT)
    })
  }
}

2. 改造模板渲染结构 #

将原有的单容器包裹所有复选框的逻辑，替换为嵌套循环渲染结构：

<md-card v-if="loaded">
  <md-card-header>
    <div class="md-title">SETTINGS FOR COLUMNS</div>
  </md-card-header>
  <md-divider></md-divider>
  <md-card-content>
    <!-- 外层flex容器，实现多列横向排布，宽度不足时自动换行 -->
    <div style="display: flex; gap: 16px; flex-wrap: wrap;">
      <!-- 循环每个列的分组数据，每个分组对应一列 -->
      <div 
        v-for="(columnOptions, colIndex) in getGroupedOptions" 
        :key="`column-${colIndex}`"
        style="min-width: 180px;"
      >
        <!-- 渲染当前列内的所有复选框，完全复用原有逻辑 -->
        <b-form-checkbox
          v-for="option in columnOptions"
          v-bind:key="option.id"
          @input="changeOptions"
          :id="option.text"
          v-model="option.value"
          name="checkbox-1"
        >
          {{ option.displayName }}
        </b-form-checkbox>
      </div>
    </div>
  </md-card-content>
</md-card>

可调整参数说明 #

• 每列的复选框数量：直接修改PER_COLUMN_COUNT的值即可，例如改为20即每列放置20个
• 列间距：调整外层flex容器的gap值
• 列最小宽度：调整每个列容器的min-width值，适配不同页面尺寸

注意：拆分逻辑未修改原有复选框的事件绑定、双向绑定逻辑，所有交互行为与之前单排渲染的效果完全一致，不会因分组带来功能异常。

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