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