el-tree选中在其他地方显示
时间: 2023-08-20 20:10:11 浏览: 96
您可以使用el-tree的"current-node-key"属性来实现在其他地方显示选中的节点。首先,您需要在el-tree组件上设置"current-node-key"属性,并将其绑定到一个数据属性上,例如"selectedNodeKey"。然后,您可以在需要显示选中节点的地方使用这个数据属性。以下是一个示例代码:
```html
<template>
<div>
<el-tree
:data="treeData"
:current-node-key="selectedNodeKey"
@node-click="handleNodeClick"
></el-tree>
<div v-if="selectedNodeKey">
Selected Node: {{ selectedNodeKey }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Node 1',
children: [
{
id: 2,
label: 'Node 1-1',
},
{
id: 3,
label: 'Node 1-2',
},
],
},
{
id: 4,
label: 'Node 2',
},
],
selectedNodeKey: null,
};
},
methods: {
handleNodeClick(data) {
this.selectedNodeKey = data.id;
},
},
};
</script>
```
在上面的示例中,当用户点击树节点时,会触发"node-click"事件,并调用"handleNodeClick"方法来更新"selectedNodeKey"的值。然后,使用"v-if"指令来判断是否有选中的节点,并在需要显示选中节点的地方显示选中节点的信息。
请注意,上述示例中的数据和事件处理方法仅供参考,您需要根据您的实际需求进行适当的修改。
阅读全文