1,默认展开全部
在使用 ant-design-vue 的折叠面板 collapse 时候,如果key是数字的话,需要 String一下
<a-collapse v-model="activeKey" class="animateItem">
<a-collapse-panel
v-for="item of animateList"
:header="item.name"
:key="String(item.id)"
>
<a-row :gutter="16">
<card-animate
v-for="(value, index) in item.list"
:key="index"
:span="6"
:animateName="value"
/>
</a-row>
</a-collapse-panel>
</a-collapse>
2,自定义切换图标
额(⊙o⊙)…,虽然我自定义的图标和官方上的几乎一样,但是自定义的是直角,是iconfont图标,官方的是锐角,老板说啥就是啥
<a-collapse v-model="activeKey" v-for="(section,sectionIndex) in sections" :key="String(sectionIndex)" :expand-icon-position="expandIconPosition" :bordered="false" class="customCollapse">
<template slot="expandIcon" slot-scope="props">
<div style="display:flex;justify-content:center" >
<span style="opacity:0">{{props.isActive}}</span>
<i v-if="props.isActive" class="iconfont icon-zhankai" style="font-size:18px"></i>
<i v-if="!props.isActive" class="iconfont icon-shouqi" style="font-size:18px"></i>
</div>
</template>
<a-collapse-panel :key="String(sectionIndex)" v-if="section.sectionName !== '总评'&§ion.type !== 'evaluation'" :style="customStyle">
<template slot="header">
<div class="module">
<p class="interview-drawer-con-title noBorder must-fill">
<i class="iconfont icon-layer-group mr5"></i>
{{section.sectionName}}
</p>
</div>
</template>
<div>内容内容内容</div>
</a-collapse-panel>
</a-collapse>