iview动态展开Collapse的第一个面板

Posted 会飞的小蜜蜂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview动态展开Collapse的第一个面板相关的知识,希望对你有一定的参考价值。

动态数据生成的手风琴,collapseVal初始化时直接设置开展面板值(不会自动展开第一个面板):collapseVal: ["0"],  // 手风琴

解决:
使用手风琴组件代码:
<!-- 手风琴 ,name可以不设置,默认是索引值 -->
<Collapse class="ivu-collapse-unit" v-model="collapseVal" accordion>
    <Panel :name="index+‘‘" v-for="(item,index) in list" :key="index">
        <span>标题</span>
        <div slot="content" class="p-24-r">
               内容              
        </div>
    </Panel>
</Collapse>

data设置的初始值  collapseVal: null,  // 手风琴当前激活面板

在刷新数据后设置当前展开的面板:
this.collapseVal = ["0"];   // 动态展开第一个手风琴面板

 

以上是关于iview动态展开Collapse的第一个面板的主要内容,如果未能解决你的问题,请参考以下文章

el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常

EXTjs 面板折叠和展开方法

Ant Design中折叠面板Collapse

vant折叠面板怎么切换按钮

如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠?

Bootstrap Collapse 不正确地展开表