Question

如何基于某些更改数据模型的事件，如何显示/隐藏下面的BootstrapVue b表示例中的列。

const multisort = (s1, s2) => {
  const bcs = -1 * byCountrySize(s1, s2) // -1 = desc 
  const ba =  1 *byAge(s1, s2)
  const bgt = 0 * byGameType(s1, s2) // 0 = doesn't matter
  const bs = 1 * byScore(s1, s2)
  const bl = -1 * byLevel(s1, s2) // -1 = desc

  // ... other weights and criterias

  // array order matters !
  return [bcs, ba, bgt, bs, bl].reduce((acc, val) => decide(val, acc), 0)
}

// invoke [].sort with custom sort...
scores.sort(multisort)

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

Answer 2

我知道这很老了，但问题仍然有效。有用于标题和单元格的v槽。您可以在插槽中的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>`

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

2 个答案: