[英]Bootstrap-vue - How to show/hide a b-table column programmatically
How could I show/hide a column in the BootstrapVue b-table
example below based on some event that changes the data model.我如何根据更改数据模型的某些事件在下面的 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>
You could use computed
property to get person details according to the state given by show/hide age
button您可以使用
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>
I realise this is old, but the question is still valid.我意识到这是旧的,但问题仍然有效。 There are v-slots for headers and cells.
标题和单元格有 v 槽。 You can use v-show on a div in the slot to show/hide both header and cells that the whole column is hidden.
您可以在插槽中的 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>`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.