vue.js - 如何使用 Bootstrap-vue 切换单个行的详细信息

Question

我正在使用 bootstrap-vue table为一个项目陷入困境，没有文档。

如何同时切换 1 行详细信息？

这里有一个完整的表格示例，其中包含关于 here 的数据的表格

Answer 1

我正在使用 v-model 并将其设置为不同的数组，因为 b-table 上的 v-model 返回当前显示的项目，过滤和分页后。使它对性能更友好，因为你限制了你必须循环关闭的项目数量。

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        items: [
          { id: 1, name: 'Povl', age: 26, gender: 'Male', secret: 'I love kittens' },
          { id: 2, name: 'Charlie', age: 9, gender: 'Female', secret: 'I love cupcakes' },
          { id: 3, name: 'Max', age: 71, gender: 'Male', secret: 'I love puppies' }
        ],
        currentItems: [],
        fields: [
          { key: 'name' }, { key: 'age' }, { key: 'gender' }, { key: 'actions' }
        ]
      }
    },
    methods: {
      //finds a specific item based on the provided ID and toggles details on that item
      toggleDetails(row) {
        if(row._showDetails){
          this.$set(row, '_showDetails', false)
        }else{
          this.currentItems.forEach(item => {
            this.$set(item, '_showDetails', false)
          })

          this.$nextTick(() => {
            this.$set(row, '_showDetails', true)
          })
        }
      }
    }
  })
}

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-container class='pt-3'>
    <b-table :items="items" :fields="fields" v-model="currentItems" bordered fixed>
      <template v-slot:cell(actions)="{ detailsShowing, item }" >
        <!-- Use the built in method from the scoped data to toggle the row details -->
        <b-btn @click="toggleDetails(item)">{{ detailsShowing ? 'Hide' : 'Show'}} secret</b-btn>
      </template>
      <template v-slot:row-details="{ item }">
        <b-card>
          {{ item.secret }}
        </b-card>
      </template>
    </b-table>
  </b-container>
</div>