如何使用 BootstrapVue 的布局和网格系统来排列这些复选框？

Question

我有一个像这样的 BootstrapVue table；

这是 table;

的代码

window.onload = () => {
  new Vue({
    el: '#app',
    computed: {
      visibleFields() {
        return this.fields.filter(field => field.visible)
      }
    },
    data() {
      return {
        items: [
          { id: 1, first: 'Mike', last: 'Kristensen', age: 16 },
          { id: 2, first: 'Peter', last: 'Madsen', age: 52 },
          { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 },
          { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 },
        ],
        fields: [
          { key: 'id', label: 'ID', visible: true },
          { key: 'first', label: 'First Name', visible: true },
          { key: 'last', label: 'Last Name', visible: true },
          { key: 'age', label: 'Age', visible: true },
        ]
      }
    }
  })
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.min.js"></script>

<div id='app'>
<b-checkbox
    :disabled="visibleFields.length == 1 && field.visible"
    v-for="field in fields" 
    :key="field.key" 
    v-model="field.visible" 
    inline
  >
    {{ field.label }}
  </b-checkbox>
  <br /><br />
  <b-table :items="items" :fields="visibleFields" bordered>
  </b-table>
</div>

我想使用 BootstrapVue 布局和网格系统来排列复选框。

https://bootstrap-vue.org/docs/components/layout

我希望使用 BootstrapVue 的布局和网格系统放置复选框，如下所示；

<b-container class="bv-example-row">
  <b-row class="justify-content-md-center">
    <b-col col lg="12">1 of 3</b-col>
    <b-col cols="12" md="auto">Variable width content</b-col>
    <b-col col lg="2">3 of 3</b-col>
    <b-col col lg="14">3 of 3</b-col>
  </b-row>
</b-container>

使问题复杂化的是包含 v-for 的复选框的 html 代码。见下文；

<b-checkbox
    :disabled="visibleFields.length == 1 && field.visible"
    v-for="field in fields" 
    :key="field.key" 
    v-model="field.visible" 
    inline
  >
    {{ field.label }}
  </b-checkbox>

我正在使用 vue v2.6，BootstrapVue。

Answer 1

看起来很棘手，但可行。

在 <b-col> 上使用 v-for 循环而不是 <b-checkbox>
将 <b-col> 像 col lg=12 这样的道具作为 fields 属性作为对象 {col:true,lg:12}
使用 v-bind 将用户样式道具 <b-col>

这是我在Codepen中的尝试，希望我能正确理解你的意图。

我假设您正在尝试如下所示进行渲染。

    <b-container class="bv-example-row">
      <b-row class="justify-content-md-center">
        <b-col col lg="12">
          <b-checkbox :disabled="visibleFields.length == 1 && fields[0].visible" v-model="fields[0].visible" inline>
            {{ fields[0].label }}
          </b-checkbox>
        </b-col>
        <b-col cols="12" md="auto">
          <b-checkbox :disabled="visibleFields.length == 1 && fields[1].visible" v-model="fields[1].visible" inline>
            {{ fields[1].label }}
          </b-checkbox>
        </b-col>
        <b-col col lg="2">
          <b-checkbox :disabled="visibleFields.length == 1 && fields[2].visible" v-model="fields[2].visible" inline>
            {{ fields[2].label }}
          </b-checkbox>
        </b-col>
        <b-col col lg="14">
          <b-checkbox :disabled="visibleFields.length == 1 && fields[3].visible" v-model="fields[3].visible" inline>
            {{ fields[3].label }}
          </b-checkbox>
        </b-col>
      </b-row>
    </b-container>

向您的字段添加新道具属性

fields:[ 
 { key: 'id', label: 'ID', visible: true, props:{ col:true, lg:12}},
 { key: 'first', label: 'First Name', visible: true, props:{cols:12, md:'auto' }},
 { key: 'last', label: 'Last Name', visible: true, props:{ col:true ,lg:2 }},
 { key: 'age', label: 'Age', visible: true, props:{col:true, lg:14} },
]

v-for 使用 v-bind 道具循环

  <div id='app'>
    <b-container class="bv-example-row">
      <b-row class="justify-content-md-center">
        <b-col v-for="(field,index) in fields" :key="index" v-bind="field.props">
          <b-checkbox :disabled="visibleFields.length == 1 && field.visible" v-model="field.visible" inline>
            {{ field.label }}
          </b-checkbox>
        </b-col>    
      </b-row>
    </b-container>

    <br /><br />
    <b-table :items="items" :fields="visibleFields" bordered>
    </b-table>
  </div>

如何使用 BootstrapVue 的布局和网格系统来排列这些复选框？

How to use BootstrapVue's layout and grid system to arrange these checkboxes?

javascript

vue.js

bootstrap-vue