vue+elementUI实现穿梭树（el-tree的父子级（上下级）均不关联）

效果演示：

穿梭树父子不关联

---

项目场景：

这里需要一个选择部门的穿梭树，并且左右树里面的父子不关联（部门树还父子不关联，需求真的有毒啊），

---

解决方案：

前期百度了很多，最后都不行！！！哎，自己写吧，正好记录一下

<template>
  <div class="transferTreeBox">
    <!-- 左侧待选内容 -->
    <div class="SelectBox">
      <div class="boxTitle">未选择列</div>
      <div class="boxCenter">
        <el-tree ref="leftTree"
                 :data="leftTreeData"
                 :props="defaultProps"
                 show-checkbox
                 :check-on-click-node="true"
                 :default-expanded-keys="['-1','0','1','2','3']"
                 :check-strictly="true"
                 node-key="id"
                 @check="treeLeftCheck">
          <span class="custom-tree-node"
                slot-scope="{ node, data }">
            <span>{
  { node.label }}</span>
            <span>
              <el-button v-show="!data.flag"
                         type="text"
                         size="mini"
                         @click="() => appendAdd(node,data)">
                添加
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>

    <!-- 中间穿梭按钮 -->
    <!-- <div class="transferBtn">
      <div class="pickBtn"
           @click="towardsRight">&gt;&gt;</div>
      <div class="pickBtn"
           @click="towardsLeft">&lt;&lt;</div>
    </div> -->

    <!-- 右侧已选内容 -->
    <div class="SelectBox">
      <div class="boxTitle">已选择列</div>

      <div class="boxCenter">
        <el-tree ref="rightTree"
                 :data="rightTreeData"
                 :props="defaultProps"
                 show-checkbox
                 :check-on-click-node="true"
                 :default-expanded-keys="['-1','0','1','2','3']"
                 :check-strictly="true"
                 node-key="id"
                 @check="treeRightCheck">
          <span class="custom-tree-node"
                slot-scope="{ node, data }">
            <span>{
  { node.label }}</span>
            <span>
              <el-button v-show="data.flag"
                         type="text"
                         size="mini"
                         @click="() => removeDel(data)">
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div>
      <el-radio :label="true"
                v-model="include_children">是否包含子部门</el-radio>
      &l