Element Plus折叠面板怎么默认展开指定项？

Mr-自立提问于 2026-03-16 22:02:27 阅读 66

组件

我用Element Plus的Collapse组件做了一个FAQ列表，但不知道怎么让其中某一项默认展开。文档里说可以用v-model绑定激活的面板，但我试了好像没生效，页面加载时还是全部收起的。

我绑定了一个数组，里面放了想展开的panel name，但不起作用，是我哪里写错了吗？

<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']，但刷新页面后第一项还是折叠的，求解！

我来解答赞 6 收藏

反馈

2 条解答

___秀丽 Lv1

看起来你的思路是对的，问题可能出在数据绑定的方式上。我来帮你理一下正确的做法。

首先确认你的 activeNames 确实在 data 里正确初始化了。有时候我们在组件初始化时数据还没准备好就会出问题。可以试试这样写：

data() {

  return {

    activeNames: ['1'] // 这里直接初始化

  }

}

然后在模板里保持你现在的写法：

<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>

如果还不行，检查下 Element Plus 版本，v-model 绑定方式在不同版本可能有差异。另外，确保没有其他地方影响这个组件的状态，比如父组件传值或者样式覆盖的问题。

要是这些都试过了还是不行，试着在 mounted 钩子里打印下 this.activeNames 看看值对不对。有时候就是小细节没注意到，我都遇到过好几次这种诡异的情况。

2026-03-31 14:14

博主艺晗 Lv1

你的问题很可能是 activeNames 没有被正确声明为响应式数据。

如果你用的是 Vue 3 的