Element Plus折叠面板怎么默认展开多个项？

书生シ嘉倪提问于 2026-03-18 09:57:20 阅读 9

组件

我在用Element Plus的Collapse组件，想让页面加载时默认展开多个面板，但试了设置activeNames为数组，好像只生效第一个。是不是我写法有问题？

我这样写的：

<el-collapse v-model="activeNames">
  <el-collapse-item title="面板1" name="1">内容1</el-collapse-item>
  <el-collapse-item title="面板2" name="2">内容2</el-collapse-item>
</el-collapse>

然后在data里初始化：activeNames: ['1', '2']，但实际只有第一个展开了，第二个还是收着的，这是为啥？

我来解答赞 2 收藏

反馈

1 条解答

司徒莉娜 Lv1

这个问题我来帮你分析一下。

先说结论：你的写法本身没问题，但有几种可能的原因会导致这种情况。

最可能的原因：accordion属性被设置了

Collapse组件有一个accordion属性，默认是false。当设置为true时，折叠面板会变成手风琴模式，同时只能展开一个面板。如果你或者你的同事不小心在某个地方写了，那就会只生效第一个。

检查一下你的代码有没有这个问题：

<!-- 正确的写法，确保没有accordion属性，或者明确设为false -->

<el-collapse v-model="activeNames" :accordion="false">

  <el-collapse-item title="面板1" name="1">内容1</el-collapse-item>

  <el-collapse-item title="面板2" name="2">内容2</el-collapse-item>

</el-collapse>

Vue3 + Element Plus 的写法：

<script setup>

import { ref } from 'vue'



// 用ref定义响应式数据

const activeNames = ref(['1', '2'])

</script>

Vue2 + Element UI 的写法：

export default {

  data() {

    return {

      activeNames: ['1', '2']

    }

  }

}

再一个可能：Vue响应式数据没定义对

如果你是在Vue3的setup里用普通数组而不是ref/reactive，那数据就不是响应式的，页面加载时初始化值不会生效。

你可以加个console.log调试一下，看activeNames在页面加载后到底是什么值：

onMounted(() => {

  console.log('当前展开的面板:', activeNames.value)

})

总结一下排查步骤：

第一步，确认没有:accordion="true"这个属性
第二步，确认你的activeNames是响应式数据（Vue3用ref，Vue2在data里返回）
第三步，刷新页面看控制台输出，验证activeNames的值是不是['1', '2']

如果以上都没问题，那就要检查一下是不是Element Plus的版本太旧了，可以尝试升级到最新版本试试。

2026-03-18 13:20