Как показать / скрыть столбец b-таблицы программно - PullRequest
Новая
       7

Как показать / скрыть столбец b-таблицы программно

0 голосов
/ 06 сентября 2018

Как я могу показать / скрыть столбец в примере b-таблицы 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>

1 Ответ

0 голосов
/ 06 сентября 2018

Вы можете использовать свойство 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>`
...