el-tree获取所有节点
时间: 2023-05-08 10:56:42 浏览: 3644
el-tree==>添加分级图标==>添加引导线样式==>点击节点展示全部父节点信息==>使用$store封装全局组件
要获取el-tree中的所有节点,我们可以使用element-ui库提供的tree节点API进行操作。具体步骤如下:
1. 首先需要获取到el-tree的实例,可以使用ref属性来获取:
```html
<el-tree ref="tree"></el-tree>
```
2. 在操作函数中调用getCheckedNodes()方法,该方法会返回一个数组,其中包含所有已选中的节点。由于我们并不需要仅获取已选中的节点,可以将参数设置为false,这样获取到的就是所有的节点:
```javascript
let nodes = this.$refs.tree.getCheckedNodes(false, true);
```
3. 此时我们就可以通过循环遍历nodes数组,获取到每一个节点的数据:
```javascript
nodes.forEach((node) => {
console.log(node.label); //节点的显示内容
console.log(node.data); //节点的附加数据
console.log(node.children); //节点的子节点数组,如果没有子节点则为空数组
});
```
总的来说,获取el-tree中的所有节点非常简单,只需要获取实例后调用getCheckedNodes()方法即可。需要注意的一点是,getCheckedNodes()方法返回的是一个异步方法,所以我们需要将操作放在其回调函数中才能获得正确的结果。
阅读全文