带复选框el-tree node获取父级节点
时间: 2023-07-26 08:09:50 浏览: 116
要获取父级节点,您可以使用el-tree组件的node-key属性和getCheckedNodes方法。首先,在el-tree中设置node-key属性,该属性将用于标识每个节点。例如:
```html
<el-tree :data="data" :node-key="nodeKey"></el-tree>
```
在你的Vue实例中,你需要定义nodeKey:
```js
data() {
return {
nodeKey: 'id', // 假设每个节点都有一个唯一的id属性
data: [
{
id: 1,
label: '一级节点',
children: [
{
id: 2,
label: '二级节点',
children: [
{
id: 3,
label: '三级节点',
}
]
}
]
}
]
}
}
```
然后,在您想要获取选中节点的父节点时,可以使用getCheckedNodes方法来获取选中的节点。例如:
```js
methods: {
getParentNodes(node) {
const checkedNodes = this.$refs.tree.getCheckedNodes()
const parentNodes = []
const findParent = (node) => {
const parentNode = this.$refs.tree.getNode(node[this.nodeKey].toString())
if (parentNode && !parentNodes.includes(parentNode)) {
parentNodes.push(parentNode)
findParent(parentNode)
}
}
findParent(node)
return parentNodes
}
}
```
在此示例中,getParentNodes方法接受一个节点作为参数,并返回选中节点的所有父节点。该方法首先使用getCheckedNodes方法获取所有选中的节点。然后,它定义了一个递归函数findParent,该函数使用getNode方法获取节点的父节点。如果父节点存在且还没有被添加到parentNodes数组中,则将其添加到数组中,并继续查找其父节点。最后,该方法返回包含所有父节点的parentNodes数组。
阅读全文