翻了一下vantUI官網,發現沒有可以直接使用的樹形控件或層級選擇器的組件,所以嘗試用checkbox實現。
我們想實現的是如圖所示的功能,當選中一級選擇器后,其所屬的二級選擇器能夠被全選;當取消二級選擇器的全選狀態時,一級選擇器也同時取消選中狀態;最外層還有一個全選按鈕控制所有選擇器的全選。

DOM結構如圖所示:

首先實現一級選擇器控制二級全選的功能。
van-checkbox有提供toggleAll方法,可以控制復選框組的全選、取消全選和取反。需要搭配ref使用。有關ref注冊組件的內容點擊>>此鏈接查看。

如果只有一組復選框組的話可以直接使用這個方法。首先給需要全選的復選框組注冊組件:

當一級選擇器的選中狀態發生改變時,執行toggleAll方法。


這樣就完成了。



