通过复选框控制折叠面板的打开与关闭

饿了么框架大家使用的都比较多，今天介绍一个关于折叠面板的业务场景：

默认的折叠面板单击就可打开，业务要求通过复选框控制折叠面板的打开

如图是默认的折叠面板展示：

下面这张图是修改为依靠复选框打开折叠面板的效果：

代码如下：

 <el-collapse v-model="activeNames" @change="handleChange">          
    <el-collapse-item name="1">
// name='1' 就是当前折叠面板对应的值            
      <template slot="title">              
         <el-checkbox v-model="transfer_subject" @change="handleCheck('1')">转学科</el-checkbox>
//通过change事件将当前面板的值传递进行
       </template>            
       <el-form-item v-if="transfer_subject" label="转岗至新学部如下:" label-width="160" prop="transfer_subject">              
          <el-radio-group v-model="form.transfer_subject" class="teacher_header_move"> 
            <el-radio  v-for="item in formOption.subjects || []"  :label="item.id +''"  :key="item.id"  class="form-checkbox-minwidth">{{item.name}}
            </el-radio>              
          </el-radio-group>            
       </el-form-item>          
   </el-collapse-item>        
</el-collapse>

data中定义activeNames,它里面存储的是当前折叠面板中已经被打开的面板对应的值

transfer_subject来控制复选框的选择状态

 data () { 
   return {
      activeNames: [],
      transfer_subject: false }

点击折叠面板会触发handleChange()事件，里面的val值就是选中的数据，通过this.activeNames= [ ]方法，将每次选中的置空，这样就不会打开折叠面板。

handleChange (val) { 
   this.activeNames = []    
}

这里就是将选中的复选框对应的面板进行处理，val就是面板对应的值

handleCheck (val) {
  if (this.transfer_subject) { 
       this.activeNames.push('1')  
  } else if (!this.transfer_subject) {
    this.activeNames = this.activeNames.shift()        
  }   

通过this.transfer_subject判断复选框的选择状态，如果是选中的则

通过push方法将，当前面板的值填加进去，当前面板就会打开

否则 通过shift将activeNames里面存储的值去掉，当前面板就会关闭

以上就是整个业务处理过程，其中还有不妥之处，请多指教。