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

【问题标题】：How to toggle individual row details using Bootstrap-vue如何使用 Bootstrap-vue 切换单个行的详细信息
【发布时间】：2020-01-30 04:24:19
【问题描述】：

我在一个项目中使用bootstrap-vuetable，但遇到了一个没有文档的问题。

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

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

【问题讨论】：

您提出问题并链接答案，这将在完整示例中。你对这个例子有什么特别不理解的地方？
@Hiws 告诉我链接上的答案，请:)

标签： vue.js bootstrap-vue

【解决方案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>

【讨论】：

现在看看我的问题是我可以同时切换多行，这不是我想要的。我想同时切换 1 行...打开 B 行，关闭 A 行
你可以在我粘贴的代码中做到这一点吗？您可以通过单击每行中的按钮来切换每一行。在这种情况下，顶部的第三个按钮根据 id 切换特定行
@Jonathan 我已经编辑了答案来做我认为你想要的。否则，请编辑您的问题以进一步深入解释您想要什么，否则人们无法帮助您。
@Hiws 为什么不直接使用row.toggleDetails() 而不是this.$set(...)？我错过了什么吗？
@qqmber36 因为该函数没有在toggleDetails 函数中公开，因为它是在 sn-p 中设置的。您必须将其从插槽数据发送到使用它的方法。直接在项目上设置_showDetails 更简单。

【解决方案2】：

@Hiws 回答仅在我将 @row-clicked 侦听器添加到 b-table 时才对我有效。

如果单击操作槽，我无法使其工作，就像给出的示例一样。我更改了if 条件，因为它返回了undefined，这导致逻辑只运行else 部分

toggleDetails(row) {
  if (row.detailsShowing) {
    row.toggleDetails()
  } else {
    this.currentItems.forEach(item => {
      this.$set(item, '_showDetails', false)
    })
    this.$nextTick(() => {
      row.toggleDetails()
    })
  }
}

【讨论】：