element ui两棵树互相关联公共部分

element ui中两棵树关联公共部分，点击一棵树的公共部分的数据，另一棵树也会被选上，取消后 另一棵树也会被取消，如下图所示

实现代码：
html部分：

<div style="height:200px;overflow-y: auto;">
        <el-tree v-if="dialogFormVisible"
                 ref="tree"
                 :data="allTsc"
                 :default-checked-keys="TscID"
                 show-checkbox
                 node-key="id"
                 @check-change="handleCheckChange"
                 :props="defaultProps">
        </el-tree>
        <el-tree v-if="dialogFormVisible"
                 ref="lockTree"
                 :data="allLock"
                 :default-checked-keys="LockID"
                 show-checkbox
                 node-key="id"
                 @check-change="handleCheckChange2"
                 :props="defaultProps2">
        </el-tree>
      </div>

js部分：

  data () {
    return {
      all: [],
      allTsc: [],
      allLock: [],
      tsc: [],
      lock: [],
      TscID: [],
      LockID: [],
      defaultProps: {
        children: 'children_node',
        label: 'label'
      },
      defaultProps2: {
        children: 'children_node',
        label: 'label'
      },
    }
  },

 created () {
   this.initLimitationAllTree()
 },
 methods: {
    initLimitationAllTree () { 
      this.loading = true
      getLimitationAllTree().then(response => { // getLimitationAllTree 一个接口获取数据 
        this.limitationsOptions = response.data.data
        let all = []
        let tsc = []
        let lock = []
        this.limitationsOptions.forEach(item => { // 将接口数据分派到两棵树中
          console.log(item)
          if (item.action_scope === "$all$") { // 两棵树的公共数据放在all中
            all.push(item)
          }if (item.action_scope === "$tsc$") {
            tsc.push(item)
          } else if (item.action_scope === "$interlock$") {
            lock.push(item)
          }
        })
        this.all = all;
        this.tsc = tsc;
        this.lock = lock;
        this.allTsc = this.all.concat(tsc); //tsc 的数据
        this.allLock = this.all.concat(lock); //lock的数据
        this.loading = false
      }).catch(error => {
        this.$messageErr.error(error)
        this.loading = false
      })
    },
    handleCheckChange (value, checked) { // tsc
      if(checked) {
        if (value.action_scope ==="$all$") { // 将checked 为true的所有公共部分的数据赋给this.LockID
          this.LockID = this.$refs.tree.getCheckedKeys() // getCheckedKeys 所有数据
        }
      } else {
        if (value.action_scope === "$all$") {
          this.LockID = this.$refs.tree.getCheckedKeys()
          this.allLock = this.all.concat(this.lock); // 刷新Lock下拉Check状态  重新渲染lock的数据
        }
      }
    },
    handleCheckChange2 (value, checked) { // lock
      if(checked) {
        if (value.action_scope === "$all$") {
          this.TscID = this.$refs.lockTree.getCheckedKeys()
        }
      } else {
        if (value.action_scope === "$all$") {
          this.TscID = this.$refs.lockTree.getCheckedKeys()
          this.allTsc = this.all.concat(this.tsc);
        }
      }
    },
 }

<style scoped>
/deep/ .el-tree {
  color: #000000 !important;
  width: 50%;
  float: left;
}
</style>