導(dǎo)語(yǔ):Vue中單選下拉框開(kāi)發(fā)起來(lái)非常簡(jiǎn)單,直接select包裹一個(gè)帶v-for的option即可

但是當(dāng)我們想做個(gè)帶多選的下拉框該怎么辦呢?最簡(jiǎn)方法是什么?比如下面這個(gè)圖:

如果網(wǎng)上搜的話,搜的是一堆帶children的 ,那種是遍歷tree的思想,和多選下拉框不是一回事,而且寫(xiě)起來(lái)復(fù)雜

看不懂源碼再往下讀:

需求:后端傳前端一個(gè)數(shù)組對(duì)象,每個(gè)對(duì)象有id和name,前端把被選中對(duì)象的id傳給后端.

分析:前端先聲明一個(gè)空數(shù)組,拿到后端返回的數(shù)組后,給該數(shù)組新增一個(gè)name為全部的對(duì)象元素

接下來(lái)寫(xiě)HTML:

下面就是JS了:

JS只watch這個(gè)數(shù)組不需要寫(xiě)額外的方法,夠簡(jiǎn)單吧.

核心點(diǎn)有兩個(gè):

1.Vue想watch一個(gè)數(shù)組對(duì)象的變化,需要聲明為deep? 就是深度watch的意思.

原因:Vue會(huì)把data遍歷成一個(gè)樹(shù),只watch指定的節(jié)點(diǎn)本身,如果節(jié)點(diǎn)還有子節(jié)點(diǎn)不會(huì)管,加個(gè)deep是讓Vue也watch子節(jié)點(diǎn)

2.name為'全部'的對(duì)象,比其他對(duì)象多了一個(gè)last_state屬性

因?yàn)镴S中把一個(gè)數(shù)組賦值一個(gè)變量,其實(shí)是這個(gè)變量的引用指向這個(gè)數(shù)組.在Vue的watch中,舊值與新值的引用指向同一個(gè)數(shù)組,當(dāng)用戶點(diǎn)了全選,判斷不了全選之前的狀態(tài)是被選中還是沒(méi)被選中,所以要把上一個(gè)狀態(tài)存在last_state中,當(dāng)用戶點(diǎn)了全選,如果last_state為true說(shuō)明是取消全選的操作,如果last_state為false說(shuō)明是勾選全選的操作

非核心點(diǎn)有一個(gè):

怎么實(shí)現(xiàn)子全選后,全選框被勾選呢?

或者全部勾選后,去掉一個(gè)子節(jié)點(diǎn),怎么把父(偽)節(jié)點(diǎn)也去掉呢?

解決方案:在watch中聲明空數(shù)組,然后把state為true的元素加入進(jìn)來(lái),剩下的就是比較判斷了

最后把watch聲明的空數(shù)組的id取出來(lái)傳給后端即可

到這里,貼一段源碼的watch代碼:

如果沒(méi)有起效果,brand深度復(fù)制下

如果對(duì)你有幫助,麻煩到源碼的github地址點(diǎn)個(gè)贊 謝謝!

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue设置多选框默认勾选_Vue实现全选和反选即Vue复选框增加全选功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。