el-tree-transfer 穿梭树之pid必须为0等踩坑记录

项目使用element进行开发，需求是要使用树形穿梭组件，谁知，哎，没有！但是大神们总是闲不住，组件el-tree-transfer上场，话不多说，先看看怎么用。。。。。

第一下载插件:

npm install el-tree-transfer --save

 第二使用：

1.使用组件
<tree-transfer :title="title" :pid="parentId" :from_data='fromData' :to_data='toData' :defaultProps="{label:'name'}" @addBtn='add' @removeBtn='remove' :mode='mode' height='400px' width="660px" filter >
</tree-transfer>
2.定义组件中的数据
<script>
import treeTransfer from 'el-tree-transfer'//引入组件
export defult {
    components:{ treeTransfer }, // 注册

    props: {
      
        // el-tree node-key 必须唯一
        node_key: {
              type: String,
              default: "id"
        },
        // 自定义 pid参数名，因为后端给的参数名为parentId
        pid: {
              type: String,
              default: "parentId"
        }
    },
    data(){
        return:{
             parentId:"parentId",
             fromData:[{ id: "1920", label: "祖父", children: [ { id: "1950",                 label: "爷爷", children: [ { id: "1973", children: [], label:                 "爸爸" },{ id: "1969", children: [], label: "大伯" } ] } ] }], 
             toData:[]  
        }
    },
    methods:{ 

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

    }
}

</script>

到这基本的功能是可以使用的了 

第三遇到的问题:

1.问题一，左右移动两侧数据被清空了

 第一层数据的 pid 设定为 0！！ 从第二级开始pid 就是父级的 id！也就是子pid一定要等于父的id，也就是说“祖父的pid一定要为0”，比如再加一个祖母和祖父同级，那么“祖母的pid也一定要为0”

2.如果后台反的数据中pid字段为其他字段比如parentId,需要自定义pid

<tree-transfer :title="title" :pid="parentId" :from_data='fromData' :to_data='toData' :defaultProps="{label:'name'}" @addBtn='add' @removeBtn='remove' :mode='mode' height='400px' width="660px" filter > </tree-transfer> 

props: {

      // 自定义 pid参数名，因为后端给的参数名为parentId

      pid: { type: String, default: "parentId" }

},