如何实现点击Bootstrap Vue表格行详情按钮时关闭其他已展开行

要实现点击展开当前行详情时自动关闭其他行，你可以通过自定义点击事件手动控制所有行的_showDetails状态，具体修改如下：

核心思路 #

• 替换默认的row.toggleDetails为自定义方法，接管详情展开/关闭的逻辑
• 点击按钮时先遍历所有数据项，将它们的_showDetails设为false，关闭所有已展开的详情
• 根据当前行的展开状态，决定是否打开当前行的详情（点击"Show"则展开当前行，点击"Hide"则关闭当前行）

修改后的完整代码 #

<template>
  <div>
    <b-table :items="items" :fields="fields" striped responsive="sm">
      <template #cell(show_details)="row">
        <b-button size="sm" @click="toggleRowDetails(row)" class="mr-2">
          {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
        </b-button>
      </template>

      <template #row-details="row">
        <b-card>
          <b-row class="mb-2">
            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
            <b-col>{{ row.item.age }}</b-col>
          </b-row>
        </b-card>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: ['first_name', 'last_name', 'show_details'],
      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',
          _showDetails: true
        },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  },
  methods: {
    toggleRowDetails(row) {
      // 获取当前行的目标状态（展开/关闭）
      const targetState = !row.detailsShowing
      
      // 关闭所有行的详情
      this.items.forEach(item => {
        item._showDetails = false
      })
      
      // 如果目标是展开，则打开当前行的详情
      if (targetState) {
        row.item._showDetails = true
      }
    }
  }
}
</script>

代码说明 #

• toggleRowDetails方法：先全局关闭所有行的详情，再根据当前行的点击意图决定是否展开当前行，确保始终只有一行处于展开状态
• 按钮文字依然使用row.detailsShowing判断，保持原有的交互逻辑（展开时显示"Hide"，隐藏时显示"Show"）

内容的提问来源于stack exchange，提问作者Sin Wai Chow