element ui 两棵树tree 关联公共部分

如图所示：红框内的是公共数据，我们想要实现的是，左边树的节点被选择，右边也会选择上，选择右边，左边也会被选择。

思路：element ui 文档中没有找到实现这种效果的方法，我们可以把两边的tree分别拆分成两棵树----左边的tree=commonTree+自己独有部分；右边tree=commonTree+自己独有部分。

实现：
左边：

右边：

props: {
    limitations: { // 从父组件传递过来的需要被checked的树节点id
      type: Array,
      required: true
    }
},

data () {
    return {
      commonID: [], // 先给树节点的默认选中项赋空值，然后在watch中监控弹框是否出现，然后赋值
      tscID: [],
      lockID: [],
      parentIds: [], // parentIds用于存放所有父节点id
    }
}

 watch: {
    dialogFormVisible(newValue){ //dialogFormVisible  监控弹框的出现 并给树节点赋值
      if (newValue){
        //初始值过滤掉父节点 只有子节点才会有checked状态
        this.commonID = this.role.limitations.filter(value => !this.parentIds.includes(value)); 
        this.tscID = this.role.limitations.filter(value => !this.parentIds.includes(value));
        this.lockID = this.role.limitations.filter(value => !this.parentIds.includes(value));
      }
    }
  },

 methods: {
 	getParentId(role){ // 利用递归的方法获取所有父节点id
      if (role.children_node){
        this.parentIds.push(role.id)
        role.children_node.forEach(value => {
          this.getParentId(value)
        })
      }
    }
    
    initLimitationAllTree () { //获取树的所有数据 然后分发给几棵树
      this.loading = true
      getLimitationAllTree().then(response => { //接口getLimitationAllTree
        this.limitationsOptions = response.data.data
        let all = []
        let tsc = []
        let lock = []
        this.limitationsOptions.forEach(item => {
          this.getParentId(item) // 调用getParentId递归方法 获取所有父节点id
          if (item.action_scope === "$all$") {
            all.push(item)
          }if (item.action_scope === "$tsc$") {
            tsc.push(item)
          } else if (item.action_scope === "$interlock$") {
            lock.push(item)
          }
        })
        this.common = all;
        this.tsc = tsc;
        this.lock = lock;
        this.loading = false
      }).catch(error => {
        this.$messageErr.error(error)
        this.loading = false
      })
    },
    
 	expandNodeCommon(params, value) { // 节点被展开时触发的事件
      const node = value ? this.$refs.treeCommonLock.getNode(params[0]) : this.$refs.treeCommonTsc.getNode(params[0])
      node.expand()
    },
    
    collapseNodeCommon(params, value) { // 节点被关闭时触发的事件
      const node = value ? this.$refs.treeCommonLock.getNode(params[0]) : this.$refs.treeCommonTsc.getNode(params[0])
      node.collapse()
    },
    
    handleCheckChangeCommon (value) { // 控制两边common树的联动
      const selectedIds = this.$refs.treeCommonTsc.getCheckedKeys()
      if (value === 'tsc') {
        if (this.commonID.toString() === selectedIds) {
          return
        }
        this.commonID = selectedIds
        // 将 ‘tsc’ 的common树的所有节点给 'lock'的common树 实现联动
        this.$refs.treeCommonLock.setCheckedKeys(this.commonID)
      }
      if (value === 'lock') {
        const selectedIds = this.$refs.treeCommonLock.getCheckedKeys()
        if (this.commonID.toString() === selectedIds.toString()) {
          return
        }
        this.commonID = selectedIds
        this.$refs.treeCommonTsc.setCheckedKeys(this.commonID)
      }
    },
    
    editLimitations () {
      let arr1 = this.$refs.treeCommonTsc.getHalfCheckedKeys() // common树的所有父节点id
      let arr2 = this.$refs.treeCommonTsc.getCheckedKeys() // common树的所有子节点id
      let arr3 = this.$refs.treeTsc.getHalfCheckedKeys()
      let arr4 = this.$refs.treeTsc.getCheckedKeys()
      let arr5 = this.$refs.treeLock.getHalfCheckedKeys()
      let arr6 = this.$refs.treeLock.getCheckedKeys()
      // 将三棵树的所有父节点和子节点id 存入this.role.limitations 中
      this.role.limitations = arr1.concat(arr2).concat(arr3).concat(arr4).concat(arr5).concat(arr6)
      console.log(this.role.limitations)
      this.dialogFormVisible = false
    },
 }