vue.js - 如何控制“b-form-checkbox-group”中多个复选框的呈现

Question

我有这个 Vue 代码：

<b-input-group >
   <b-form-checkbox-group id="boxes"
      v-model="selectedBoxes"
      :options="boxes"
      name="boxes"
      stacked />
</b-input-group>

// my data() includes returning:
boxes: ['1', '2', '3', '4', '5', '6'],
selectedBoxes: [],

产生这个渲染（由于stacked）。我希望复选框有两个宽，只有三个。是不是很容易上手（Vue 新手）。

标签： vue.jsbootstrap-vue

Answer 1

如果您希望复选框在三个或更少时内联，如果超过三个则堆叠，您可以执行以下操作：

<b-input-group >
   <b-form-checkbox-group id="boxes"
      v-model="selectedBoxes"
      :options="boxes"
      name="boxes"
      :stacked="boxes.length > 3" />
</b-input-group>

这使得stacked=true当有超过三个复选框时，否则它会将复选框内联（stacked= false）。

或者使用 CSS 列以列格式呈现堆叠的复选框，而不考虑复选框的数量：

<b-input-group >
   <b-form-checkbox-group id="boxes"
      v-model="selectedBoxes"
      style="column-count: 2;"
      :options="boxes"
      name="boxes"
      stacked />
</b-input-group>

只需更改column-count为您想要的列数。有关 CSS 列的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/columns