vantUI通過二級選擇器控制一級的選中狀態
上一篇我們已經利用van-checkbox成功實現一級選擇器控制二級全選的功能,點擊此鏈接>>查看。接下來需要實現當取消任意一個二級選擇器的選中狀態(即取消全選狀態時),一級選擇器也同步取消。首先給二級選擇器添加click事件,同樣,不要給復選框組添加change事件,避免一級選擇器選中狀態變化時change事件會一直觸發。復選框組通過 v-model 數組綁定復選框的勾選狀態,通過name控制數...
利用vantUI中的van-checkbox實現層級選擇器(一)
翻了一下vantUI官網,發現沒有可以直接使用的樹形控件或層級選擇器的組件,所以嘗試用checkbox實現。我們想實現的是如圖所示的功能,當選中一級選擇器后,其所屬的二級選擇器能夠被全選;當取消二級選擇器的全選狀態時,一級選擇器也同時取消選中狀態;最外層還有一個全選按鈕控制所有選擇器的全選。DOM結構如圖所示:首先實現一級選擇器控制二級全選的功能。van-checkbox有提供toggleAll方...
利用vantUI中的van-checkbox實現層級選擇器(二)
上一篇我們已經實現了只有一組復選框組的時候通過一級選擇器控制二級全選,但是很多情況下都不止一組復選框組,比如需要循環渲染后臺數據時,由于外層標簽有vfor循環,會導致出現很多個ref注冊的組件,此時的toggleAll方法便會失效或者報錯。拋棄自帶的全選方法,我們這里使用map函數處理數據。首先給一級選擇器添加click事件。注意要使用click事件而不是change事件,否則后面實現取消全選功能...
