带复选框的el-tree,某个node获取父级节点
时间: 2023-08-07 07:12:16 浏览: 102
ElementUI中el-tree节点的操作的实现
可以使用 `getNodeById` 方法来获取父级节点。首先,需要在树的配置项中设置 `node-key` 属性,指定节点的唯一标识符。然后,在某个节点被选中时,可以通过 `getNodeById` 方法获取它的父级节点。
以下是一个示例代码:
```html
<template>
<el-tree :data="data" :props="defaultProps" node-key="id" show-checkbox @check-change="handleCheckChange"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 11,
label: '二级 1-1',
children: [
{
id: 111,
label: '三级 1-1-1'
},
{
id: 112,
label: '三级 1-1-2'
}
]
},
{
id: 12,
label: '二级 1-2',
children: [
{
id: 121,
label: '三级 1-2-1'
},
{
id: 122,
label: '三级 1-2-2'
}
]
}
]
}
]
}
},
methods: {
handleCheckChange(data, checked) {
for (let i = 0; i < data.length; i++) {
const node = this.$refs.tree.getNodeById(data[i].id);
if (node) {
const parentNode = this.$refs.tree.getNodeById(node.parent.id);
console.log(parentNode);
}
}
}
},
computed: {
defaultProps() {
return {
children: 'children',
label: 'label'
};
}
}
}
</script>
```
在上面的示例中,当某个节点被选中时,`handleCheckChange` 方法会遍历所有被选中的节点,并通过 `getNodeById` 方法获取它们的父级节点。最后,父级节点会被输出到控制台上。
阅读全文