久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

29
2023/07

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

發(fā)布時間:2023-07-29 19:08:46
發(fā)布者:MaiMai
瀏覽量:
0

上一篇我們已經(jīng)實現(xiàn)了只有一組復(fù)選框組的時候通過一級選擇器控制二級全選,但是很多情況下都不止一組復(fù)選框組,比如需要循環(huán)渲染后臺數(shù)據(jù)時,由于外層標簽有vfor循環(huán),會導(dǎo)致出現(xiàn)很多個ref注冊的組件,此時的toggleAll方法便會失效或者報錯。

拋棄自帶的全選方法,我們這里使用map函數(shù)處理數(shù)據(jù)。

首先給一級選擇器添加click事件。注意要使用click事件而不是change事件,否則后面實現(xiàn)取消全選功能時容易一直觸發(fā)change事件而出現(xiàn)bug。

van-checkbox

checkAllMember方法內(nèi)編譯如下:

全選方法

邏輯是當一級選擇器為選中狀態(tài)時,用循環(huán)的方式將所有二級選擇器的id添加到復(fù)選框組v-model所綁定的選中項數(shù)組中,手動實現(xiàn)checkbox的回顯;當為非選中狀態(tài)時則相反,刪除選中項數(shù)組中存在的二級id。

這樣我們便成功實現(xiàn)一級選擇器控制二級選擇器全選或取消選中的功能。

實現(xiàn)效果

關(guān)鍵詞:
返回列表