亚洲av无码乱码国产一区二区,午夜理论片yy44880影院,午夜久久久久久禁播电影,熟睡人妻被讨厌的公侵犯

29
2023/07

利用vantUI中的van-checkbox實現(xiàn)層級選擇器(一)

發(fā)布時間:2023-07-29 16:58:44
發(fā)布者:MaiMai
瀏覽量:
0

翻了一下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方法。

層級選擇器

層級選擇器

這樣就完成了。

返回列表