vue el-tree父节点
时间: 2023-10-19 12:36:16 浏览: 106
el-tree==>添加分级图标==>添加引导线样式==>点击节点展示全部父节点信息==>使用$store封装全局组件
Vue的element-ui库提供了一个名为`el-tree`的组件,用于显示树形结构数据。在这个组件中,父节点可以通过设置`node-key`属性来识别。
要显示父节点,你需要在树形结构数据中为每个节点添加一个唯一的标识符作为`node-key`。然后,通过设置每个节点的`children`属性来定义其子节点。
下面是一个简单的例子,展示了如何使用`el-tree`组件来显示父节点:
```vue
<template>
<div>
<el-tree :data="treeData" :node-key="nodeKey"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '父节点1',
children: [
{
label: '子节点1'
},
{
label: '子节点2'
}
]
},
{
label: '父节点2',
children: [
{
label: '子节点3'
},
{
label: '子节点4'
}
]
}
],
nodeKey: 'id' // 唯一标识符字段名
};
}
};
</script>
```
阅读全文