背景
在做页面自动生成的过程中，需要动态的渲染折叠面板以及里面CheckBox内容，实现所展示信息均来自于数据库中，每个折叠面板内部操作不冲突，开始使用了 elementUI 的 CheckBox 全选组，但是再使用过程中发现，当渲染多个折叠面板时候，无法监听当前点击的是哪个全选按钮（change方法只能获取check的状态，不能传参），故而造成全选不可用。
实现效果图如下：
动态数据实现效果
思路（代码较多，此处只写出解决思路）
1、折叠面板动态生成，通过positionID的唯一标识将不同的折叠数据进行输出，name值为positionID，方便控制折叠面板的展开和折叠；
2、折叠面板内容的动态生成【全选按钮，CheckBox组】，相互不冲突。通过positionID：XXX这种数据格式存放数据，XXX为CheckBox的数据；
3、控制其中一个折叠面板有数据选中时，其他面板进行折叠不可用；无选中数据时，所有面板展开可用；这里点击单个CheckBox的时候或者全选按钮的时候动态开始匹配，获取当前操作面板的positionID，如果有选中数据就将其他的折叠设为不可用，若无选中则将所有面板设为展示可用；
4、全选按钮，设置三个状态，全选、取消全选、未选中，不同状态对应不同的图标，点击操作时开始进行图标以及相应功能的切换，点击单个checkbox时，获取当前选中的组进行匹配，更新全选按钮的状态。
总结
1、CheckBox的key值设置为key-positionID，保证每次click或者change都能找到当前操作的面板，保证唯一性，保存时再通过split('-')进行处理；
2、通过positionID的唯一性，标识不同面板关联的数据；
