el-tree和vue结合的穿梭框el-tree-transfer的使用

首先el-tree-transfer的地址 github文档：https://github.com/hql7/tree-transfer

效果图

安装及使用

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

然后在局部引入并注册组件就可以使用了

import treeTransfer from “el-tree-transfer”; // 引入

   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);
          }
        },
        components:{ treeTransfer } // 注册
      }

注意!!!
一定要定义pid,否则穿梭过去的结构不是树状的!!!而pid是自定义的,我这里是自己定义的parentId
以下是必须做的步骤

  props: {
    // el-tree node-key 必须唯一
    node_key: {
      type: String,
      default: "id",
    },
    // 自定义 pid参数名，因为后端给的参数名为id
    pid: {
      type: String,
      default: "parentId",
    },
  },

data里面定义

 parentId: "parentId",

处理数据

  /** 查询部门树结构 */
    getDeptTreeselect() {
      deptTreeselect().then((response) => {
        this.deptOptions = response.data;
        this.deptOptions.forEach((item) => {
          //el-tree-transfer组件的第一个pid必须为0,二级parentId必须是父级的id
          item.parentId = 0;
          if (item.children) {
            item.children.forEach((val) => {
              val.parentId = item.id;
            });
          }
        });
      });
    },

最后附上全部完整代码