主要思路: 手风琴是根据activeName的值来决定展开哪一个el-collapse-item的,每一个手风琴的el-collapse-item都有独一的name。因此,name=index,然后选择radio的时候,再activeName = index,由此判断是否展开该el-collapse-item。
以下是从项目中复制过来的代码,删减了不必要的部分。
html:
<el-collapse v-model="activeName" accordion>
<el-collapse-item
title
v-for="(item,index) in accordionList"
:key="index"
:name="index+''"
>
<template slot="title">
<div>手风琴信息{{index+1}}</div>
<div>
<span class="flagText">是否展开</span>
//showAccordion($event,index),必须带上$event
//手风琴的展开状态改变时,参数activeNames的类型为string或array
<el-radio-group @change="showAccordion($event,index)" v-model="item.isCheck">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</div>
</template>
<div>内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容</div>
</el-collapse-item>
</el-collapse>
script:
<script>
export default {
data() {
return {
activeName: '-1',
isCheck:1,
accordionList:[]
};
}
method:{
// 单选框按钮的值改变时触发的事件
showAccordion(e,index){
if(e == 1){
//index+''可以把index转化为字符串string
this.activeName = index+''
}
}
}
}
</script>
效果图展示:
效果图仅供参考
关于手风琴的change: