elementui-树形控件实现 两棵树的联动，两棵树有相同的id节点时节点的状态保持一致

在Element UI中，实现两棵树形控件的联动，可以通过监听树形控件的节点点击事件来实现。当用户点击一棵树的节点时，你可以获取该节点的id，然后根据这个id去更新另一棵树的节点状态。

以下是一个简单的实现示例：

<template>
  <div>
    <el-tree
      :data="treeData1"
      :props="defaultProps"
      @node-click="handleNodeClick"
      ref="tree1"
    ></el-tree>
    <el-tree
      :data="treeData2"
      :props="defaultProps"
      ref="tree2"
    ></el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData1: [
        { id: 1, label: 'Node1', children: [{ id: 2, label: 'Child1' }] }
        // ... 其他节点数据
      ],
      treeData2: [
        { id: 1, label: 'Node1', children: [{ id: 2, label: 'Child1' }] }
        // ... 其他节点数据
      ]
    };
  },
  methods: {
    handleNodeClick(data, node, tree) {
      // 获取当前点击的节点id
      const nodeId = data.id;
      // 更新第二棵树的节点状态
      this.updateTree2(nodeId);
    },
    updateTree2(nodeId) {
      // 使用nodeId更新treeData2中对应的节点状态
      // 这里需要实现具体的节点状态更新逻辑
      // 例如: 设置选中状态
      this.$refs.tree2.setCurrentKey(nodeId);
    }
  }
};
</script>

在这个例子中，我们有两棵树，treeData1 和 treeData2，它们有相同的节点id。当你在第一棵树 tree1 上点击一个节点时，handleNodeClick 方法会被触发，然后更新第二棵树 tree2 的对应节点状态。在这个例子中，我们使用了Element UI的 setCurrentKey 方法来设置节点的选中状态，你可以根据需要调用其他的方法来更新节点状态，比如展开节点、选中节点等。