上一篇我們已經實現了只有一組復選框組的時候通過一級選擇器控制二級全選,但是很多情況下都不止一組復選框組,比如需要循環渲染后臺數據時,由于外層標簽有vfor循環,會導致出現很多個ref注冊的組件,此時的toggleAll方法便會失效或者報錯。
拋棄自帶的全選方法,我們這里使用map函數處理數據。
首先給一級選擇器添加click事件。注意要使用click事件而不是change事件,否則后面實現取消全選功能時容易一直觸發change事件而出現bug。

checkAllMember方法內編譯如下:

邏輯是當一級選擇器為選中狀態時,用循環的方式將所有二級選擇器的id添加到復選框組v-model所綁定的選中項數組中,手動實現checkbox的回顯;當為非選中狀態時則相反,刪除選中項數組中存在的二級id。
這樣我們便成功實現一級選擇器控制二級選擇器全選或取消選中的功能。




