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

Posted 2023-02-22

【中文标题】如何使用 Bootstrap-vue 切换单个行的详细信息

【英文标题】：How to toggle individual row details using Bootstrap-vue

【发布时间】：2020-01-30 04:24:19

【问题描述】：

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

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

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

【问题讨论】：

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

@Hiws 告诉我链接上的答案，请:)

【参考方案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()
    )