Bootstrap-vue - 如何以编程方式 show/hide b-table 列
Bootstrap-vue - How to show/hide a b-table column programmatically
我如何根据更改数据模型的某些事件 show/hide 下面的 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>
您可以使用 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>
我意识到这是旧的,但问题仍然有效。 header 和单元格有 v-slots。您可以在插槽中的 div 上使用 v-show 来 show/hide header 和隐藏整列的单元格。
`<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>`
我如何根据更改数据模型的某些事件 show/hide 下面的 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>
您可以使用 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>
我意识到这是旧的,但问题仍然有效。 header 和单元格有 v-slots。您可以在插槽中的 div 上使用 v-show 来 show/hide header 和隐藏整列的单元格。
`<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>`