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