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>

Answer 2

我意识到这是旧的，但问题仍然有效。标题和单元格有 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>`