如何实现Buefy表格单一行详情展开，点击时自动关闭其他行

没错，你确实需要维护一个状态来控制展开的详情行，而且不用单独通知每个子组件关闭——通过状态驱动视图的方式就能轻松实现这个需求。下面给你详细拆解实现步骤：

1. 维护单个状态变量（而非数组） #

因为我们只允许同时展开一行，所以不需要用数组存储多个行ID，只需要一个变量来记录当前展开的行的唯一标识即可。比如：

<script setup>
import { ref } from 'vue'

// 初始化为null，表示没有任何行展开
const currentOpenRowId = ref(null)
</script>

2. 绑定详情行的展开状态 #

在表格的详情行模板中，通过判断当前行的ID是否等于currentOpenRowId来控制展开状态：

<template>
  <b-table :data="yourTableData">
    <!-- 自定义操作列（带Chevron图标） -->
    <template #cell(actions)="{ row }">
      <b-icon
        :icon="currentOpenRowId === row.id ? 'chevron-down' : 'chevron-right'"
        @click="toggleDetailRow(row.id)"
        class="cursor-pointer"
      />
    </template>

    <!-- 详情行内容模板 -->
    <template #detail="props">
      <b-table-detail
        :open="currentOpenRowId === props.row.id"
      >
        <!-- 这里放你的详情内容 -->
        <div>
          <h4>{{ props.row.name }}的详情</h4>
          <p>更多信息：{{ props.row.description }}</p>
        </div>
      </b-table-detail>
    </template>
  </b-table>
</template>

3. 处理点击切换逻辑 #

点击Chevron图标时，更新currentOpenRowId状态：如果当前行已经展开，就关闭（设为null）；否则展开当前行（设为该行ID），这样其他行的open判断会自动变为false，实现自动关闭的效果：

<script setup>
// ... 之前的状态定义

const toggleDetailRow = (rowId) => {
  // 切换状态：如果当前行已展开则关闭，否则展开它
  currentOpenRowId.value = currentOpenRowId.value === rowId ? null : rowId
}
</script>

关于你提到的update_event事件 #

如果你的详情行组件内部会触发update_event事件（比如用户点击详情行内的关闭按钮），只需要在父组件中监听这个事件并同步更新状态即可：

<!-- 在b-table-detail上添加事件监听 -->
<b-table-detail
  :open="currentOpenRowId === props.row.id"
  @update_event="handleDetailEvent(props.row.id, $event)"
>
<!-- ... -->
</b-table-detail>

对应的处理函数：

const handleDetailEvent = (rowId, isOpen) => {
  // 根据子组件传递的展开状态更新父组件状态
  currentOpenRowId.value = isOpen ? rowId : null
}

关键注意点 #

• 确保你的表格数据中每一行都有唯一的ID（比如row.id），这是区分不同行的核心依据；
• 这种方式不需要遍历所有行去手动关闭，完全通过状态驱动视图更新，代码更简洁高效；
• 如果你的Buefy版本略有不同，只需调整b-table-detail的open属性绑定逻辑即可，核心思路一致。

内容的提问来源于stack exchange，提问作者user783388