treeselect 如何获取选中的信息到根节点
时间: 2024-05-01 16:12:02 浏览: 6
在vue Treeselect中,获取选中节点的信息到根节点可以通过以下步骤实现:
1. 在treeselect组件上,使用@select事件绑定一个方法,该方法会在选中节点时触发。
2. 在该方法中,通过获取选中节点的id和label来获取节点的信息。
3. 通过递归遍历树数据源,根据选中节点的父id找到根节点,并获取根节点的信息。
4. 将获取到的根节点信息存储到相应的变量中,以便后续使用。
下面是一个示例代码:
```html
<treeselect @select="handleSelect"></treeselect>
```
```javascript
methods: {
handleSelect(node) {
// 获取选中节点的id和label
const nodeId = node.id;
const nodeLabel = node.label;
// 通过递归遍历树数据源,获取根节点信息
const root = this.getRootNode(this.treeData, nodeId);
// 将获取到的根节点信息存储到变量中
this.rootNodeId = root.id;
this.rootNodeLabel = root.label;
},
getRootNode(data, nodeId) {
let rootNode = {};
const findRoot = (node) => {
if (node.id === nodeId) {
rootNode = node;
} else if (node.children) {
for (let i = 0; i < node.children.length; i++) {
findRoot(node.children[i]);
}
}
};
findRoot(data);
return rootNode;
},
}
```