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 
                  })
   }
}

最后的效果：