获取el-tree得所有子节点得demo
时间: 2023-08-30 08:09:57 浏览: 111
以下是一个获取 el-tree 所有子节点的 demo:
```html
<template>
<el-tree :data="data" :props="defaultProps">
<span class="custom-tree-node" slot-scope="{ node, data }">
{{ data.label }}
<el-button @click="getAllChildren(node)">获取子节点</el-button>
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1"
},
{
label: "三级 1-1-2"
}
]
},
{
label: "二级 1-2",
children: [
{
label: "三级 1-2-1"
},
{
label: "三级 1-2-2"
}
]
}
]
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1"
},
{
label: "三级 2-1-2"
}
]
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1"
},
{
label: "三级 2-2-2"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
getAllChildren(node) {
console.log(node.childNodes);
}
}
};
</script>
```
在这个 demo 中,我们通过给每个节点添加一个按钮,来触发获取子节点的操作。具体实现方式是在 el-tree 中添加一个 slot,并为按钮绑定一个点击事件,点击事件中调用 `getAllChildren` 方法,方法中获取当前节点的所有子节点并打印到控制台中。
这个 demo 的核心代码如下:
```html
<span class="custom-tree-node" slot-scope="{ node, data }">
{{ data.label }}
<el-button @click="getAllChildren(node)">获取子节点</el-button>
</span>
```
```javascript
getAllChildren(node) {
console.log(node.childNodes);
}
```
阅读全文