如何控制“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-checkbox-group 的方法。

您可以改为使用 v-for 和单独的 b-checkbox 和计算属性来获取选定的值。

new Vue({
  el: '#app',
  computed: {
    selectedBoxes() {
      return this.boxes.filter(box => box.checked).map(box => box.value);
    }
  },
  data() {
    return {
      boxes: [
        { value: 1, text: 'Value 1', checked: false },
        { value: 2, text: 'Value 2', checked: false },
        { value: 3, text: 'Value 3', checked: false },
        { value: 4, text: 'Value 4', checked: false },
        { value: 5, text: 'Value 5', checked: false },
        { value: 6, text: 'Value 6', checked: false }
      ]
    }
  }
})

body { padding: 1rem; }

<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.css" rel="stylesheet"/>


<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <div class="font-weight-bold">
    Using span and br
  </div>
  <span v-for="(box, index) in boxes">
    <b-checkbox :key="index" v-model="box.checked" class="d-inline">
      {{ box.text }}
    </b-checkbox>

    <!-- Render a <br> every 2nd checkbox -->
    <br v-if="index % 2" />
  </span>
  
  <!-- 
     Another option is to use the bootstrap grid system.
     However this will create spacing between the elements based on the width of the row
    -->
  <div class="font-weight-bold mt-5">
    Using row/cols
  </div>
  <b-row>
    <b-col v-for="(box, index) in boxes" cols="6">
      <b-checkbox :key="index" v-model="box.checked">
        {{ box.text }}
      </b-checkbox>
    </b-col>
  </b-row>
  Selected boxes: {{ selectedBoxes.length > 0 ? selectedBoxes : 'Nothing selected' }}
</div>

Answer 2

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

<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