先說需求
在一個表單中有兩個下拉框,都是訪問同一個接口拿到樹結構的List數據后動態綁定的到各自的下拉框,區別在於A下拉框只顯示根節點,B下拉框顯示樹結構的所有數據。
為了性能上的考慮,必須滿足前端只發送一個ajax請求,后端也只寫一個獲取TreeList的結構的接口,用來滿足兩個下拉框的動態賦值。
如圖:左圖顯示根節點項,右圖顯示所有樹結構項
貼上返回的數據結構
思路:從數據結構來分析這是個包含了所有根節點和子節點數據的treeList數組對象。B下拉框可以原封不動的賦值,A下拉框就需要把根節點下的children屬性給刪除掉。
這里就涉及到了幾個知識點:深拷貝,map、解構和擴展運算符 通過ES6的語法優雅的對數組里的屬性進行刪除
直接貼代碼:
最后打印出的根節點數據對比如下: