el-tree-transfer 穿梭框的使用踩坑

el-tree-transfer的數據處理

注意看下面的踩坑

一，標准用法

github文檔：https://github.com/hql7/tree-transfer

1.使用組件
<tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'name'}" 
              @addBtn='add' @removeBtn='remove' :mode='mode' height='400px' width="660px" filter >
</tree-transfer>
2.定義組件中的數據
fromData:[
              {
                id: "330000",
                label: "浙江省 1",
                children: [
                  {
                    id: "330100",
                    label: "杭州市 1-1",
                    children: [
                      {
                        id: "330102",
                        children: [],
                        label: "上城區 1-1-1"
                      },{
                        id: "330103",
                        children: [],
                        label: "下城區 1-1-2"
                      }
                    ]
                  },  
                ]
              },
            ],
            toData:[],
移動數據時的方法：
// 監聽穿梭框組件添加
          add(fromData,toData,obj){
            // 樹形穿梭框模式transfer時，返回參數為左側樹移動后數據、右側樹移動后數據、移動的{keys,nodes,halfKeys,halfNodes}對象
            // 通訊錄模式addressList時，返回參數為右側收件人列表、右側抄送人列表、右側密送人列表
            console.log("fromData:", fromData);
            console.log("toData:", toData);
            console.log("obj:", obj);
          },
          // 監聽穿梭框組件移除
          remove(fromData,toData,obj){
            // 樹形穿梭框模式transfer時，返回參數為左側樹移動后數據、右側樹移動后數據、移動的{keys,nodes,halfKeys,halfNodes}對象
            // 通訊錄模式addressList時，返回參數為右側收件人列表、右側抄送人列表、右側密送人列表
            console.log("fromData:", fromData);
            console.log("toData:", toData);
            console.log("obj:", obj);
          },
3.當我們左邊的選項移到右邊的時候，右邊顯示的樹形的結構，但是我想要取到每一個樹級菜單下最后的子節點的對象
對toData數據進行處理，然后在顯示在已選的菜單中
（這里向右側移動后不是以樹級方式顯示的，是因為后端給我們的數據不是嚴格按照官網的數據格式來的，看下面的踩坑）

 二、踩坑

1.后端給的數據無法渲染到左側框中

2.數據添加到右側之后，右側數據不顯示，左側數據消失

3.右側添加后的數據沒有樹級形式顯示

回答：后端給的數據格式如下，所以要自定下

[{
    id: "310000"
    parentId: "100000"
    name: "上海"
    children: [{
        id: "310100"
        parentId: "310000"
        name: "上海市"
        children: [{id: "310101", parentId: "310100", name: "黃浦區", children: []},…]
}]        

代碼如下：

<tree-transfer :title="title" :from_data='fromData' :to_data='toData'
             :defaultProps="{label:'name',children: 'children' }" :pid="parentId" 
              @addBtn='add' @removeBtn='remove' :mode='mode' height='400px' width="660px" filter >
            </tree-transfer>
props: {
      
    // el-tree node-key 必須唯一
    node_key: {
      type: String,
      default: "id"
    },
    // 自定義 pid參數名，因為后端給的參數名為parentId
    pid: {
      type: String,
      default: "parentId"
    },
    },

data(){
        return {         
          parentId:'parentId',
          title:['可選城市','未選城市'],
          fromData:[],
          toData:[]
        }
}

methods:{
   getAddress(){
       this.fromData.forEach(item =>{  //el-tree-transfer組件的第一個pid必須為0
                    item.parentId = 0 
                  })
   }
}

最后的效果：