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

Question

如何基于某些更改数据模型的事件，如何显示/隐藏下面的BootstrapVue b-table示例中的列。

<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>

Answer 1

您可以使用computed属性根据show/hide age按钮给出的状态获取人员详细信息

`<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>`