el-collapse折叠面板默认全部展开/关闭

最新推荐文章于 2025-03-11 14:17:15 发布

cc蒲公英

最新推荐文章于 2025-03-11 14:17:15 发布

阅读量1w

点赞数 6

分类专栏： element 文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/cddcj/article/details/132555710

版权

element 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用ElementUI的el-collapse组件，通过v-model和name属性实现段落的动态展开。数据部分展示了如何初始化activeNames来控制哪些段落默认展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所要展开项的name标识符与v-model绑定值匹配即可默认展开。

1. 案例

<el-collapse v-model="activeNames">
     <el-collapse-item name="0" title='段落1'>那一年，花开得不是最好，可是还好，我遇到你；
        </el-collapse-item>
     <el-collapse-item name="1" title='段落2'>那一年，花开得好极了，好像专是为了你；
        </el-collapse-item>
     <el-collapse-item name="2" title='段落3'>那一年，花开得很迟，还好，有你。
        </el-collapse-item>
</el-collapse>
        
data(){
    return{
         activeNames:[0, 1, 2] // 展开指定项
         activeNames:[] // 全部关闭
    }
}

实现效果：