Vuetify循环中v-expansion-panels默认展开及状态独立控制问题

问题根源是所有循环生成的v-expansion-panels组件绑定了同一个expanded变量，导致状态同步。要分离各组状态，需要给每个分组单独维护展开状态：

1. 将单个expanded ref改为数组，每个元素对应一个分组的面板展开状态
2. 初始化时，仅第一个分组设置默认展开的面板索引，其余分组设为空数组（默认收起）
3. 在循环中，将v-model绑定到对应索引的数组元素上

修改后的完整代码：

<template>
  <div v-for="(table, index) in tables" :key="index">
    <v-select></v-select>
    <v-expansion-panels
      v-model="expanded[index]"
      :readonly="readonly"
      multiple
    >
      <v-expansion-panel>
        <v-expansion-panel-title>Panel 1</v-expansion-panel-title>
        <v-expansion-panel-text>
          Some content
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel>
        <v-expansion-panel-title>Panel 2</v-expansion-panel-title>
        <v-expansion-panel-text>
          Some content
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const tables = ref([/* 你的表格数据 */]);
const readonly = ref(false);

// 初始化展开状态：第一个分组默认展开[0,1]，其余分组默认收起
const expanded = ref(
  tables.value.map((_, idx) => idx === 0 ? [0, 1] : [])
);

// 若tables是动态变化的响应式数据，监听其变化同步更新expanded数组
watch(tables, (newTables) => {
  expanded.value = newTables.map((_, idx) => idx === 0 ? [0, 1] : []);
}, { immediate: true });
</script>

关键说明 #

• expanded数组的每个元素对应一个分组的面板展开状态，彻底实现状态隔离
• 初始化时通过map方法给第一个分组设置默认展开的面板索引，其他分组设为空数组保持收起状态
• 如果tables数据会动态增减，通过watch监听其变化，同步更新expanded数组的长度和默认状态，避免索引不匹配问题

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