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