翻了一下vantUI官網(wǎng)，發(fā)現(xiàn)沒(méi)有可以直接使用的樹(shù)形控件或?qū)蛹?jí)選擇器的組件，所以嘗試用checkbox實(shí)現(xiàn)。
我們想實(shí)現(xiàn)的是如圖所示的功能，當(dāng)選中一級(jí)選擇器后，其所屬的二級(jí)選擇器能夠被全選；當(dāng)取消二級(jí)選擇器的全選狀態(tài)時(shí)，一級(jí)選擇器也同時(shí)取消選中狀態(tài)；最外層還有一個(gè)全選按鈕控制所有選擇器的全選。
DOM結(jié)構(gòu)如圖所示：
首先實(shí)現(xiàn)一級(jí)選擇器控制二級(jí)全選的功能。
van-checkbox有提供toggleAll方法，可以控制復(fù)選框組的全選、取消全選和取反。需要搭配ref使用。有關(guān)ref注冊(cè)組件的內(nèi)容點(diǎn)擊>>此鏈接查看。
如果只有一組復(fù)選框組的話可以直接使用這個(gè)方法。首先給需要全選的復(fù)選框組注冊(cè)組件：
當(dāng)一級(jí)選擇器的選中狀態(tài)發(fā)生改變時(shí)，執(zhí)行toggleAll方法。
這樣就完成了。
