Javascript Bootstrap vue—如何以编程方式显示/隐藏b表列

如何根据更改数据模型的某个事件在下面的BootstrapVue

b表中显示/隐藏列

<template>
  <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
  <b-table striped hover :items="items"></b-table>
</template>

<script>
const items = [
  { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
  { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
  { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
  { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]

export default {
  data () {
    return {
      items: items,
      showHideAge: true
    }
  }
}
</script>


显示/隐藏年龄
常数项=[
{I主动：对，年龄：40岁，名：'Dickerson'，姓：'Macdonald'}，
{isActive:false，年龄：21岁，名：“拉尔森”，姓：“肖”}，
{isActive:false，年龄：89岁，名：“日内瓦”，姓：“威尔逊”}，
{i主动：对，年龄：38岁，名：“Jami”，姓：“Carney”}
]
导出默认值{
数据（）{
返回{
项目:项目,，
showHideAge：对
}
}
}
您可以使用
computed
属性，根据
显示/隐藏年龄
按钮给出的状态获取人员详细信息

<template>
    <div>
        <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
        <b-table striped hover :items="persons"></b-table>
    </div>
</template>

<script>
    const items = [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]

    export default {
        data () {
            return {
                items: items,
                showHideAge: true
            }
        },
        computed: {
            persons() {
                if(this.showHideAge) {
                     return this.items
                } else {
                    return items.map(x => ({
                        isActive: x.isActive,
                        first_name: x.first_name,
                        last_name: x.last_name
                   }))
                }
            }
        }
    }
</script>


显示/隐藏年龄
常数项=[
{I主动：对，年龄：40岁，名：'Dickerson'，姓：'Macdonald'}，
{isActive:false，年龄：21岁，名：“拉尔森”，姓：“肖”}，
{isActive:false，年龄：89岁，名：“日内瓦”，姓：“威尔逊”}，
{i主动：对，年龄：38岁，名：“Jami”，姓：“Carney”}
]
导出默认值{
数据（）{
返回{
项目:项目,，
showHideAge：对
}
},
计算：{
人（）{
if（this.showHideAge）{
将此邮件退回
}否则{
返回items.map（x=>({
isActive:x.isActive，
名字：x。名字，
姓氏：x.姓氏
}))
}
}
}
}
我意识到这是老生常谈，但这个问题仍然有效。标题和单元格有v形槽。您可以在插槽中的div上使用v-show来显示/隐藏整个列被隐藏的标题和单元格

`<template>


<div>
      <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
      <b-table striped hover :items="items">
       <template v-slot:cell(age)="row">
        <div v-show="showHideAge">{{ row.item.age }}</div>
       </template>
       <template v-slot:head(age)="field">
        <div v-show="showHideAge">{{ field.label }}</div>
       </template>
      </b-table>
   </div>
</template>

<script>
  const items = [
    { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
    { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
    { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
    { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]

     export default {
           data () {
             return {
               items: items,
               showHideAge: true
              }
          },
         
       }
 </script>`

`
显示/隐藏年龄
{{row.item.age}
{{field.label}
常数项=[
{I主动：对，年龄：40岁，名：'Dickerson'，姓：'Macdonald'}，
{isActive:false，年龄：21岁，名：“拉尔森”，姓：“肖”}，
{isActive:false，年龄：89岁，名：“日内瓦”，姓：“威尔逊”}，
{i主动：对，年龄：38岁，名：“Jami”，姓：“Carney”}
]
导出默认值{
数据（）{
返回{
项目:项目,，
showHideAge：对
}
},
}
`
这很有效，感谢您的发布。但是，如果在初始
字段
定义中有
sortable:true
，则当
showHideAge
为false时，aria控件仍会出现。我尝试过使用
thClass
，
thStyle
，css覆盖，我无法摆脱插槽上的aria排序控件。有什么想法吗？