您可以在点击树节点时触发一个事件,将该节点的属性和值传递给父组件。然后,在父组件中通过v-if指令判断是否有数据传入,如果有则渲染el-table并显示属性和值。
以下是一个示例代码:
在子组件中:
<template>
<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '节点1',
children: [
{
label: '属性1',
prop: 'prop1',
value: 'value1'
},
{
label: '属性2',
prop: 'prop2',
value: 'value2'
}
]
},
{
label: '节点2',
children: [
{
label: '属性3',
prop: 'prop3',
value: 'value3'
},
{
label: '属性4',
prop: 'prop4',
value: 'value4'
}
]
}
]
};
},
methods: {
handleNodeClick(node) {
this.$emit('node-click', node);
}
}
};
</script>
在父组件中:
<template>
<div>
<el-tree-view @node-click="handleNodeClick"></el-tree-view>
<el-table v-if="selectedNode" :data="[selectedNode]" style="margin-top:20px;">
<el-table-column prop="label" label="属性名"></el-table-column>
<el-table-column prop="value" label="属性值"></el-table-column>
</el-table>
</div>
</template>
<script>
import ElTreeView from './ElTreeView.vue';
export default {
components: {
ElTreeView
},
data() {
return {
selectedNode: null
}
},
methods: {
handleNodeClick(node) {
this.selectedNode = node;
}
}
};
</script>
在上面的代码中,子组件中点击树节点时触发handleNodeClick
方法,将该节点传递给父组件。父组件中监听node-click
事件,将选中的节点赋值给selectedNode
。对于el-table,使用v-if指令判断selectedNode
是否有值,如果有则显示该节点的属性和值。