如何控制“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新手）？

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= ，否则它会内联呈现复选框 ( = )。truestackedfalse

或者使用 CSS columns 以柱状格式呈现堆叠的复选框，无论复选框的数量如何：

<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