在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 方法来设置节点的选中状态，你可以根据需要调用其他的方法来更新节点状态，比如展开节点、选中节点等。