PrimeVue v3 Panel状态问题：手动操作后批量展开/折叠失效

问题根源 #

你当前用单个ref变量panelCollapsed控制所有Panel的折叠状态，手动点击单个Panel的折叠/展开按钮时，PrimeVue的Panel组件会自行维护内部状态，导致外部的panelCollapsed和组件内部状态脱节，后续点击"展开全部"/"折叠全部"时，组件不会再响应外部变量的变化。

解决步骤 #

1. 为每个Panel维护独立状态 #

不再用单个变量控制所有Panel，而是给每个Panel分配独立的折叠状态：

// 假设myPanelList是你的原始面板数据列表
const panelStates = ref(myPanelList.map(() => true)); // 初始状态全部折叠

2. 绑定独立状态并监听Panel的切换事件 #

在模板中，为每个Panel绑定对应的独立状态，并通过@toggle事件监听手动操作，同步外部状态：

<Button aria-label="Expand All" @click="expandAll">Expand All</Button>
<Button aria-label="Collapse All" @click="collapseAll">Collapse All</Button>

<div v-for="(myPanel, index) in myPanelList" :key="index">
    <Panel 
        toggleable 
        :collapsed="panelStates[index]"
        @toggle="(e) => panelStates[index] = e.collapsed"
        :pt="{ content: { style: 'padding: 0' }, root: { style: 'margin-bottom: 1rem;' } }"
    >
        <!-- 面板内容 -->
    </Panel>
</div>

3. 更新批量控制函数 #

修改展开/折叠全部的函数，遍历所有Panel的状态并统一设置：

function expandAll() {
  panelStates.value.forEach((_, idx) => {
    panelStates.value[idx] = false;
  });
}

function collapseAll() {
  panelStates.value.forEach((_, idx) => {
    panelStates.value[idx] = true;
  });
}

监听Panel展开/折叠状态的方法 #

PrimeVue的Panel组件提供了@toggle事件，当用户手动点击面板的折叠/展开按钮时，会触发该事件，回调参数中包含collapsed字段（当前面板的折叠状态，true为折叠，false为展开），通过这个事件就能实时监听单个Panel的状态变化。

你提到的PanelState和PanelPassThroughMethodOptions属于样式自定义相关的API，和状态控制无关，不需要用来解决当前问题。

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