1.实现该功能

将左数据向右移动，将右数据向左移动

设计理念，
1.在左侧选择树（过滤掉根节点），当箭头位于点的中间时，遍历树并通过匹配传递选定的数据。id、删除并同时选择数据，push此时，在右侧树中：将左侧选择的数据添加到右侧树中
2.选择右侧部分，单击左中箭头时删除右侧的选定数据，然后遍历左侧树以删除右侧的剩余数据。此时，将右侧的选定数据添加到左侧树中
3.将数据返回后台时，请使用dataRight就可以了

2.关于树结构数据的知识点。

实现该功能
形成树形结构进行多选，选择器和树形结构两种绑定。

2.1获取节点

 
                

 getCheckedNode(e) {
      // 选中所有关联节点(除了所有半选定节点)
      let res = this.$refs.popoverTree.getCheckedNodes();
      console.log("res", res);
      // 选中所有关联节点（所有的半选节点也一并获取）
       let res2 = this.$refs.popoverTree.getCheckedNodes(false, true);
       //获取所有叶节点
      var allNodes = this.$refs.popoverTree.store._getAllNodes();
      var leafNodes = allNodes.filter((item) => item.isLeaf);
      var leafNodesChecked = allNodes.filter((item) => item.isLeaf&&item.checked);//获取所有叶节点,还选择了
       console.log("leafNodes",leafNodes);
//获取选定的id List
      this.ruleForm.taskId2 = leafNodesChecked .map((item, index) => {
        return item.key;
      });
    },

2.2获取所有叶节点并将数据转换为选择器所需的数据。

clickQuery() {
 let res = {
        code: "200",
        data: {
          id: "1036304891099571",
          name: "集团有限公司",
          child: [
            {
              id: "13630684273157318",
              name: "测试部门",
              child: null,
            },
            {
              id: "1368809263143937",
              name: "124",
              child: null,
            },
            {
              id: "140694353146882",  
              name: "12412412",
              child: null,
            },
            {
              id: "135397941900674",
              name: "美丽公司",
              child: [
                {
                  id: "14517171833857",
                  name: "测试",
                  child: null,
                },
              ],
            },
            {
              id: "13539818443010",
              name: "技术研究所",
              child: [
                {
                  id: "136886881891329",
                  name: "分院",
                  child: null,
                },
                {
                  id: "14069427839426",
                  name: "统计处",
                  child: null,
                },
                {
                  id: "140713948787842",
                  name: "分析处",
                  child: null,
                },
                {
                  id: "14071089877249",
                  name: "审核处",
                  child: null,
                },
              ],
            },
            {
              id: "1353982671314049",
              name: "技术研究所",
              child: null,
            },
            {
              id: "135396971778",
              name: "测试",
              child: null,
            },
            {
              id: "13539862029569",
              name: "有限公司",
              child: [
                {
                  id: "14255449269761",
                  name: "三江二级",
                  child: null,
                },
              ],
            },
            {
              id: "13539855312897",
               name: "动力技术研究所",
              child: null,
            },
            {
              id: "1353986959042",
              name: "有限公司。",
              child: [
                {
                  id: "1354868555010",
                  name: "测试部门",
                  child: null,
                },
              ],
            },
          ],
        },
      };
      this.treeData = [res.data];
      this.treeData.forEach((item, index) => {
        if (item.child && item.child.length > 0) {
          item.disabled = true;
          this.getTreeDisable(item.child);
        }
      });
      this.treeDataList = [];
      this.getTreeList(this.treeData);
  },
 // 禁止所有根节点
    getTreeDisable(list) {
      let _this = this;
      for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.child && a.child.length > 0) {
          a.disabled = true;
          _this.getTreeDisable(a.child);
        }
      }
    },
  //获取要转换为选择列表所需数据的树数据。
 getTreeList(list) {
      let _this = this;
      for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.child && a.child.length > 0) {
          _this.getTreeList(a.child);
        } else {
          this.treeDataList.push({ name: a.name, id: a.id });
        }
      }
    },

2.3

              
                
                  //下拉框列表必须存在且只能使用。v-show="false"
                  

                     
                  
                
                
                
              
            

// 多选 选择器 e对于删除后的剩余列表
    treeDataListChange(e) {
      console.log("eChange", e, this.ruleForm.taskId2);
      this.$refs.popoverTree.setCheckedKeys(this.ruleForm.taskId2);//此操作用于选择树结构上保留的数据。
    },
    // 多选 选择器 e对于已删除的项目，此操作仅用于学习。
    treeDataListRemoveTag(e) {
      console.log("eTag", e);
    },
    //此操作将在选择器的树结构中回显所选项目。
    getCheckedNode(e) {
      var allNodes = this.$refs.popoverTree.store._getAllNodes();
      var leafNodes = allNodes.filter((item) => item.isLeaf && item.checked);
      this.ruleForm.taskId2 = leafNodes.map((item, index) => {
        return item.key;
      });
    },
    // 响应的项目单位点击数input，此操作仅用于学习
    officeIdHandleNodeClick(data) {
      console.log("datadatadata", data);
    },

将选择器上的数据与树结构同步

this.$refs.popoverTree.setCheckedKeys(this.ruleForm.taskId2);//此操作用于选择树结构上保留的数据。

将树结构上的数据同步到选择器

 var allNodes = this.$refs.popoverTree.store._getAllNodes();
      var leafNodes = allNodes.filter((item) => item.isLeaf && item.checked);
      this.ruleForm.taskId2 = leafNodes.map((item, index) => {
        return item.key;
      });