el-tree-transfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件，使用前请确认已经引入element-ui 此组件功能类似于element-ui的transfer组件，但是里面的数据是树形结构！ 实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
安装：

npm install el-tree-transfer --save
或
npm i el-tree-transfer -S

然后就可以像使用普通组件一样使用 el-tree-transfer

    <template>
      <div>
        // 你的代码
        ...
        // 使用树形穿梭框组件
        <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 defult {
        components:{ treeTransfer } // 注册
        data(){
          return:{
            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:[]
          }
        },
        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);
          }
        },
       
      }
    </script>

    <style>
    ...
    </style>

到目前为止一切都很正常。

发现的问题

image.png

当我在实际使用中回显页面时候发现，穿梭框内已选择的选项竟然还存在未选择的的列表内，这显得很不正常。
一开始以为是插件配置问题，肯定漏了什么没有配置，看了文档后没有什么发现，所以自己决定改一改了。

解决思路

穿梭框左边数据和右边数据分别是两个接口获取的，拿到右侧已选择的数据后和左边全部数据做比对，如果左侧的数据包含右侧的数据删除即可。
其实这些业务逻辑最好放在后端接口里处理比较好，前端处理这些比较耗时用户体验不好，尤其还涉及到递归，比较费时。奈何，后端的朋友说不好处理，so，我也就自力更生了，自己处理吧（其实可以把我这套处理逻辑照搬到后端代码里）。
代码如下：

  // 根据已选择页面的权限 递归处理数据
  //data 所有的树形数据  selData 已选择的树形数据
    handlerTree (data, selData) {
      for (let i = data.length - 1; i >= 0; i--) {
        for (let j = selData.length - 1; j >= 0; j--) {
          if (data[i] && (data[i].id === selData[j].id)) {
            // 当id相等可以删除的情况 即：没有子级可以删除；
            if (!data[i].children && !selData[j].children) {
              data.splice(i, 1)
            } else {
              this.handlerTree(data[i].children, selData[j].children)
            }
          }
        }
      }
    },

因为要删除数组元素所以采用了倒叙遍历。代码的思路也是和注释里的一样，当id相等才进入删除条件，但是要没有子级才可以直接删除，否则递归处理子级。
这样就可以完美解决啦！

image.png

参考文档：el-tree-transfer github地址