日韩av免费一二三区-2021精品久久久久精品k8-亚洲红杏AV无码专区首页-99精品久久久久久水蜜桃

咨詢電話:
15628812133
04
2023/08

vantUI通過二級選擇器控制一級的選中狀態(tài)

發(fā)布時間:2023-08-04 17:45:12
發(fā)布者:MaiMai
瀏覽量:
0

上一篇我們已經利用van-checkbox成功實現一級選擇器控制二級全選的功能,點擊此鏈接>>查看。

接下來需要實現當取消任意一個二級選擇器的選中狀態(tài)(即取消全選狀態(tài)時),一級選擇器也同步取消。

首先給二級選擇器添加click事件,同樣,不要給復選框組添加change事件,避免一級選擇器選中狀態(tài)變化時change事件會一直觸發(fā)。

DOM結構

復選框組通過 v-model 數組綁定復選框的勾選狀態(tài),通過name控制數組中存的值。

在checkLeader方法中編譯如下:

執(zhí)行方法

Map函數循環(huán)二級選擇器,由于二級選擇器的選中狀態(tài)是由memberShip數組決定的,而memberShip數組中存的是選中選擇器的id,只要有選擇器的id沒有出現在復選框組綁定的選中項數組中,便取消一級選擇器的選中狀態(tài);循環(huán)記錄數組存在的id,若數量與二級選擇器的數量相同則設置一級選擇器為選中狀態(tài)。

最后效果如圖所示:

實現效果

返回列表