ElementUI tree控件把选中的父节点下的子节点抽出和对应的父节点组成一个新的数组
时间: 2024-03-20 12:41:22 浏览: 53
ElementUI Tree 树形控件的使用并给节点添加图标
您可以通过以下代码实现将选中的父节点下的子节点抽出和对应的父节点组成一个新的数组:
```javascript
// 获取选中的节点
const selectedNodes = this.$refs.tree.getCheckedNodes();
// 获取选中的父节点
const selectedParentNodes = selectedNodes.filter(node => node.children.length > 0);
// 获取选中的子节点
const selectedChildNodes = selectedNodes.filter(node => node.children.length === 0);
// 把选中的子节点从选中的父节点下面移除,并将选中的父节点和子节点组成一个新的数组
const selectedNodesWithParents = selectedChildNodes.map(childNode => {
const parentNode = childNode.parent;
parentNode.children = parentNode.children.filter(node => node.id !== childNode.id);
return { parent: parentNode, child: childNode };
});
// 把选中的父节点和子节点组成一个新的数组
const selectedNodesAndParents = selectedParentNodes.map(parentNode => {
const childNodes = parentNode.children.slice();
parentNode.children = [];
return { parent: parentNode, children: childNodes };
});
// 合并选中的节点和父节点,并将结果存储在新的数组中
const selectedNodesArray = selectedNodesWithParents.concat(selectedNodesAndParents);
```
其中,`this.$refs.tree` 是 ElementUI tree 控件的引用。首先,获取所有选中的节点,然后筛选出选中的父节点和子节点。接着,遍历选中的子节点,从它们的父节点的 `children` 属性中移除,并将选中的父节点和子节点组成一个新的对象 `{ parent: parentNode, child: childNode }`。然后,遍历选中的父节点,将所有子节点从它们的 `children` 属性中移除,并将选中的父节点和子节点组成一个新的对象 `{ parent: parentNode, children: childNodes }`。最后,合并选中的节点和父节点,并将结果存储在新的数组 `selectedNodesArray` 中。
阅读全文