Bootstrap-vue -如何以编程方式显示/隐藏b-table列

data() {
  return {
    columns: [
      { key: 'name', label: '姓名', visible: true },
      { key: 'age', label: '年龄', visible: true },
      { key: 'gender', label: '性别', visible: true },
    ],
  };
},

<b-table :items="items">
  <template v-for="column in columns">
    <b-table-column v-if="column.visible" :key="column.key" :label="column.label" :field="column.key"></b-table-column>
  </template>
</b-table>

methods: {
  toggleColumnVisibility(columnKey) {
    this.columns.forEach((column) => {
      if (column.key === columnKey) {
        column.visible = !column.visible;
      }
    });
  },
},

<button @click="toggleColumnVisibility('age')">切换年龄列</button>