背景

在做頁面自動生成的過程中，需要動態(tài)的渲染折疊面板以及里面CheckBox內(nèi)容，實現(xiàn)所展示信息均來自于數(shù)據(jù)庫中，每個折疊面板內(nèi)部操作不沖突，開始使用了 elementUI 的 CheckBox 全選組，但是再使用過程中發(fā)現(xiàn)，當渲染多個折疊面板時候，無法監(jiān)聽當前點擊的是哪個全選按鈕（change方法只能獲取check的狀態(tài)，不能傳參），故而造成全選不可用。
實現(xiàn)效果圖如下：

動態(tài)數(shù)據(jù)實現(xiàn)效果

思路（代碼較多，此處只寫出解決思路）

1、折疊面板動態(tài)生成，通過positionID的唯一標識將不同的折疊數(shù)據(jù)進行輸出，name值為positionID，方便控制折疊面板的展開和折疊；
2、折疊面板內(nèi)容的動態(tài)生成【全選按鈕，CheckBox組】，相互不沖突。通過positionID：XXX這種數(shù)據(jù)格式存放數(shù)據(jù)，XXX為CheckBox的數(shù)據(jù)；
3、控制其中一個折疊面板有數(shù)據(jù)選中時，其他面板進行折疊不可用；無選中數(shù)據(jù)時，所有面板展開可用；這里點擊單個CheckBox的時候或者全選按鈕的時候動態(tài)開始匹配，獲取當前操作面板的positionID，如果有選中數(shù)據(jù)就將其他的折疊設(shè)為不可用，若無選中則將所有面板設(shè)為展示可用；
4、全選按鈕，設(shè)置三個狀態(tài)，全選、取消全選、未選中，不同狀態(tài)對應(yīng)不同的圖標，點擊操作時開始進行圖標以及相應(yīng)功能的切換，點擊單個checkbox時，獲取當前選中的組進行匹配，更新全選按鈕的狀態(tài)。

總結(jié)

1、CheckBox的key值設(shè)置為key-positionID，保證每次click或者change都能找到當前操作的面板，保證唯一性，保存時再通過split('-')進行處理；
2、通過positionID的唯一性，標識不同面板關(guān)聯(lián)的數(shù)據(jù)；