導語:Vue中單選下拉框開發起來非常簡單,直接select包裹一個帶v-for的option即可

但是當我們想做個帶多選的下拉框該怎么辦呢?最簡方法是什么?比如下面這個圖:

如果網上搜的話,搜的是一堆帶children的 ,那種是遍歷tree的思想,和多選下拉框不是一回事,而且寫起來復雜

看不懂源碼再往下讀:

需求:后端傳前端一個數組對象,每個對象有id和name,前端把被選中對象的id傳給后端.

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

接下來寫HTML:

下面就是JS了:

JS只watch這個數組不需要寫額外的方法,夠簡單吧.

核心點有兩個:

1.Vue想watch一個數組對象的變化,需要聲明為deep? 就是深度watch的意思.

原因:Vue會把data遍歷成一個樹,只watch指定的節點本身,如果節點還有子節點不會管,加個deep是讓Vue也watch子節點

2.name為'全部'的對象,比其他對象多了一個last_state屬性

因為JS中把一個數組賦值一個變量,其實是這個變量的引用指向這個數組.在Vue的watch中,舊值與新值的引用指向同一個數組,當用戶點了全選,判斷不了全選之前的狀態是被選中還是沒被選中,所以要把上一個狀態存在last_state中,當用戶點了全選,如果last_state為true說明是取消全選的操作,如果last_state為false說明是勾選全選的操作

非核心點有一個:

怎么實現子全選后,全選框被勾選呢?

或者全部勾選后,去掉一個子節點,怎么把父(偽)節點也去掉呢?

解決方案:在watch中聲明空數組,然后把state為true的元素加入進來,剩下的就是比較判斷了

最后把watch聲明的空數組的id取出來傳給后端即可

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

如果沒有起效果,brand深度復制下

如果對你有幫助,麻煩到源碼的github地址點個贊 謝謝!

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。