el-tree-transfer树形穿梭框回显左右节点重复问题

项目开发过程中遇到个问题 

数据进行回显的时候 左右的节点会重复 网上介绍这个问题的特别少

有的说是node-key 其实怎么说呢 配置了好久发现这个根本就是存在的bug

我也不知道为啥很少介绍这个bug的存在的

先贴出问题图

<template>
  <div>
    // 你的代码
    ...
    // 使用树形穿梭框组件
    {{ toData }}
    <tree-transfer
      :title="title"
      :from_data='fromData'
      :to_data='toData'
      :defaultProps="{label:'label'}"
      @add-btn='add'
      @remove-btn='remove'
      :mode='mode'
      height='540px'
      filter
      openAll
    ></tree-transfer>
  </div>
</template>

<script>
import treeTransfer from 'el-tree-transfer' // 引入

export default {
  data () {
    return {
      title: ['源列表', '目标列表'],
      mode: 'transfer', // transfer addressList
      fromData: [
        {
          id: '1',
          pid: 0,
          label: '一级 1',
          children: [
            {
              id: '1-1',
              pid: '1',
              label: '二级 1-1',
              disabled: true,
              children: []
            },
            {
              id: '1-2',
              pid: '1',
              label: '二级 1-2',
              children: [
                {
                  id: '1-2-1',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-1'
                },
                {
                  id: '1-2-2',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-2'
                }
              ]
            }
          ]
        },
      ],
      toData: [ { "id": "1", "pid": 0, "label": "一级 1", "children": [ { "id": "1-2", "pid": "1", "label": "二级 1-2", "children": [ { "id": "1-2-1", "pid": "1-2", "children": [], "label": "二级 1-2-1" }, { "id": "1-2-2", "pid": "1-2", "children": [], "label": "二级 1-2-2" } ] } ] } ],
      rightIds: [],
    }
  },
  methods: {
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode () {
      if (this.mode == 'transfer') {
        this.mode = 'addressList'
      } else {
        this.mode = 'transfer'
      }
    },
    // 监听穿梭框组件添加
    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)
    },
    // 获取右侧数据 id
    getRightDataIds(list, rightIds) {
      for (let rightItem of list) {
        rightIds.push(rightItem.id);
        if (rightItem.children && rightItem.children.length) {
          this.getRightDataIds(rightItem.children, rightIds);
        }
      }
      return rightIds;
    },
    // 处理过滤数据
    getFilterLeftData() {
      let rightIds = this.getRightDataIds(this.toData, []);
      this.fromData = this.filterLeftData(this.fromData, rightIds, []);
    },
    filterLeftData(list, rightIds, newList) {
      for (let leftItem of list) {
        if (rightIds.includes(leftItem.id)) {
          if (leftItem.children && leftItem.children.length) {
            let insetBool = false;
            for (let child of leftItem.children) {
              if (!rightIds.includes(child.id)) insetBool = true;
            }
            if (insetBool) {
              let jsonItem = JSON.parse(JSON.stringify(leftItem));
              jsonItem.children = [];
              newList.push(jsonItem);
              this.filterLeftData(leftItem.children, rightIds, jsonItem.children);
            }
          }
        } else {
          let jsonItem = JSON.parse(JSON.stringify(leftItem));
          jsonItem.children = [];
          newList.push(jsonItem);
        }
      }
      return newList;
    },
  },
  components: { treeTransfer }, // 注册
  mounted () {
    this.getFilterLeftData();
  },
}
</script>

<style>
</style>

 解决之后的逻辑