導語: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地址點個贊 謝謝!
)
