上一篇我們已經(jīng)實(shí)現(xiàn)了只有一組復(fù)選框組的時(shí)候通過一級(jí)選擇器控制二級(jí)全選，但是很多情況下都不止一組復(fù)選框組，比如需要循環(huán)渲染后臺(tái)數(shù)據(jù)時(shí)，由于外層標(biāo)簽有vfor循環(huán)，會(huì)導(dǎo)致出現(xiàn)很多個(gè)ref注冊(cè)的組件，此時(shí)的toggleAll方法便會(huì)失效或者報(bào)錯(cuò)。
拋棄自帶的全選方法，我們這里使用map函數(shù)處理數(shù)據(jù)。
首先給一級(jí)選擇器添加click事件。注意要使用click事件而不是change事件，否則后面實(shí)現(xiàn)取消全選功能時(shí)容易一直觸發(fā)change事件而出現(xiàn)bug。
checkAllMember方法內(nèi)編譯如下：
邏輯是當(dāng)一級(jí)選擇器為選中狀態(tài)時(shí)，用循環(huán)的方式將所有二級(jí)選擇器的id添加到復(fù)選框組v-model所綁定的選中項(xiàng)數(shù)組中，手動(dòng)實(shí)現(xiàn)checkbox的回顯；當(dāng)為非選中狀態(tài)時(shí)則相反，刪除選中項(xiàng)數(shù)組中存在的二級(jí)id。
這樣我們便成功實(shí)現(xiàn)一級(jí)選擇器控制二級(jí)選擇器全選或取消選中的功能。
