for循环el-checkbox实现类似于el-collapse的折叠效果

1.需要实现的功能

1.1. 点击label文字/多选框实现多选操作；

1.2. 点击（点击可展开预览/收起）实现展开或隐藏多选条件下对应的面板;

1.3.可实现Collapse 折叠面板的基础用法：可同时展开多个面板，各面板之间不影响；

2.模拟数据和方法

//data中定义
 data() {
      return {
        checkboxGroup:[], //模拟多选绑定的值
        list: [ //模拟checkbox的多选项
          {id:100,label:'学生基本信息'},
          {id:101,label:'现任职务'},
          {id:102,label:'外语水平'},
        ],
        activeIndex: -1, //模拟当前点击的面板
     }
 }

 created() {
   this.changeData(); //周期函数中调用
 },

 methods: {
      //数据改造-为了单独控制面板的隐藏-显示
      changeData(){
        const items = this.list.map(item => {
          item.show = false
          return item
        })
        return items
      },
      //Checkbox-group点击事件：注意是Checkbox-group
      changeCheckbox(value){
        console.log('Checkbox-group点击事件',value);
      },
      //控制面板展示-隐藏
      clickItem(index){
        this.activeIndex = index
        this.list[this.activeIndex].show = !this.list[this.activeIndex].show 
      },
 }

3.页面代码部分

<el-checkbox-group class="prize-apply-checkbox" v-model="checkboxGroup" @change="changeCheckbox">
  <el-checkbox v-for="(item,index) in list" :key="index" :label="item.label"> 
      {{item.label}} 
      <span @click="clickItem(index)">（点击可展开预览/收起）</span>
      <div v-if="item.show == true && item.label == '学生基本信息'"> 
         学生基本信息
      </div>
      <div v-if="item.show == true && item.label == '现任职务'"> 
         现任职务
      </div>
      <div v-if="item.show == true && item.label == '外语水平'"> 
        外语水平
      </div>
   </el-checkbox>
</el-checkbox-group>

4.页面代码css

注意：因为引用的是elementUI组件中的el-checkbox组件，根据自己的实际需求，样式需要自己单独控制，个人建议是写在可公共控制的element-ui.scss文件中

.prize-apply-checkbox{
  padding-left: 25px;
  .el-checkbox{
    display: flex;
    margin-right: 0px;
    margin-bottom: 20px;
    .el-checkbox__label{
      width: 100%;
      position: relative;
      span{
        font-size: 12px;
        cursor: pointer;
      }
      >div{
        width: 100%;
        height: 100px;
        border: 1px red solid;
        padding: 15px 20px;
      }
      :hover{
        color: #409EFF;
      }
    }
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #333;
  }
}