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

Question

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

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