多選穿梭框總結 （vue + element）

博客地址：https://ainyi.com/23

 

示例

 

介紹

• 實現省市區三級多選聯動，可任選一個省級、市級、區級，加入已選框，也能夠在已選框中刪除對應的區域。
• 選擇對應倉庫，自動勾選倉庫對應的省，取消就反選
• 選擇一樣地區，選擇省級或市級，若該對象下面的市級或區級已有選擇，就自動合併爲一個省級或市級：

例如：
已選擇：廣東省廣州市荔灣區
點擊加入：廣東省廣州市
最後顯示：廣東省廣州市
廣州市已被選擇，對應市級的區將不顯示，只顯示對應的市

同理：選擇廣東省，也將下面已選擇的全部的市或區合併成一個省級，只顯示這個省級

設計

• 拆分組件：倉庫和省市區框做爲父組件
• 三個區域框和一個已選框類似，複用一個組件 transfer，放在省市區框父組件中。

省級 transfer、市級 transfer、區級 transfer

數據展現

• 父組件從數據中獲取省級數據傳遞到子組件 transfer 展現出來。

• 當選中的某個省，則傳遞對應省級 id 到父組件，根據 id 查找對應的市級並過濾，而且使用 ref 控制市級的 transfer 組件的 father 屬性，就是在市級 transfer 組件裏也有對應的省級對象。

• 多選狀況，只保留最後選擇的父級（省級/市級）查找出對應的子級（市級/區級）

• 市級和省級組件的 father 對象是 {id:"", text:""}

• 市級組件的 father 保存着省級的 id 和名稱。

• 區級組件的 father 保存着省市的 id 和名稱（以-分割，如：{id:"10001-100145815", text:"廣東省-河源市"}）

• 省市區都分別設置一個過濾數組，用來過濾已選的區域

區域搜索

• 監聽搜索框的值，從新獲取區域數據，再經過 filter 篩選出搜索的數據

點擊添加進已選：

• 省級直接點擊添加選中的省份，直接傳遞該省的對象進已選數組。並將選擇的省級 id 添加進省級過濾數組。而後判斷已選區域中是否有該省級一下的市級，有則刪除，合併成一個省級，並在省級過濾數組刪除掉這個市級 id。

• 市級點擊添加選中的城市，選中的城市對象數組，遍歷拼接上當前的 father 對象，最終保存的形式：{id: "10005-545132025515", text: "廣東省-廣州市"}，也要判斷當前市級下是否有對應的區級，有則合併，並在區級過濾數組刪除這個區級 id。

• 區級點擊添加選中的區域，拼接上當前的 father 對象，最終的保存的形式：{id:"10004-15613610-25156165156321", text:"廣東省-河源市-龍川縣"},

• 子組件 transfer 中區域數據 districtList 須要放在監聽器裏，當點擊省級或市級，自動監聽更新市級或區級的列表

從已選中刪除

• 選中已選區域的數據，傳遞到父組件，一樣的道理，刪除過濾數組對應的 id，並刷新對應的區域數據

監聽倉庫與區域對應

• 找出選中倉庫的對應省級 id，已選區域有該省則過濾，無則添加，當點擊取消勾選的時候，也實時將已選區域中對應的省級刪除掉。

 

相關鏈接

• github：https://github.com/Krryxa/my-transfer
• 博客地址：https://ainyi.com/23