如何仅显示/隐藏此 bootstrapvue 表的第二列和第三列？

下面的代码将显示/隐藏 a 中的所有列BootstrapVue桌子。代码的来源就是这里的答案；

使用 bootstrap-vue 组件和 bootstrap 3 动态显示/隐藏列 https://stackoverflow.com/questions/59836782/show-hide-columns-dynamically-with-a-bootstrap-vue-component-and-bootstrap-3/59837483#59837483

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/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/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/[email protected] /cdn-cgi/l/email-protection/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>

表格如下所示：

我想要的是仅显示/隐藏First Name and Last Name列，而不是所有列。

我正在使用 Vue v2.6 和BootstrapVue.

您可以添加另一个计算属性并过滤所需的字段：

new Vue({
  el: '#app',
  computed: {
    visibleFields() {
      return this.fields.filter(field => field.visible)
    },
    showFields() {
      return this.fields.filter(field => field.key.includes('first') || field.key.includes('last'))
    }
  },
  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/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/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/[email protected] /cdn-cgi/l/email-protection/dist/bootstrap-vue.min.js"></script>

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