javascript - Bootstrap-vue - 如何以编程方式显示/隐藏 b 表列
问题描述
我如何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>
解决方案
您可以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>
推荐阅读
- python - wxPython 网格小部件底部和网格边框内的不需要的空间
- angular - 在 Angular 中使用 FontAwesome Pro
- laravel - Laravel show 方法输出空对象
- python - 在 python trie 中存储字数
- reactjs - 减速器未执行
- javascript - 手机屏幕上的菜单有问题
- angular - Angular Material 微调器不适用于同步调用
- nuget - Squirrel 中的 NuGet 框架定位
- javascript - 调整窗口大小后移动导航下拉菜单不会消失
- android - 添加回溯在 WebRTC 上不起作用