获取elementui tree展开的节点
时间: 2023-09-13 18:13:08 浏览: 161
ElementUI中el-tree节点的操作的实现
您可以使用 ElementUI 的 Tree 组件的 `getCheckedKeys` 方法来获取已展开的节点。以下是一个示例代码:
```javascript
<template>
<div>
<el-tree
ref="tree"
:data="data"
:default-expanded-keys="expandedKeys"
node-key="id"
show-checkbox
:default-checked-keys="checkedKeys"
@check-change="handleCheckChange"
></el-tree>
<el-button type="primary" @click="getExpandedKeys">获取展开的节点</el-button>
</div>
</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',
},
],
},
],
},
{
id: 2,
label: '一级 2',
children: [
{
id: 21,
label: '二级 2-1',
children: [
{
id: 211,
label: '三级 2-1-1',
},
{
id: 212,
label: '三级 2-1-2',
},
],
},
{
id: 22,
label: '二级 2-2',
children: [
{
id: 221,
label: '三级 2-2-1',
},
{
id: 222,
label: '三级 2-2-2',
},
],
},
],
},
],
expandedKeys: [1, 11, 12], // 默认展开的节点
checkedKeys: [], // 已选中的节点
};
},
methods: {
handleCheckChange(checkedKeys) {
this.checkedKeys = checkedKeys;
},
getExpandedKeys() {
const tree = this.$refs.tree;
const expandedKeys = tree.getCheckedKeys(true);
console.log(expandedKeys);
},
},
};
</script>
```
上述代码中,我们使用 `default-expanded-keys` 属性来设置默认展开的节点,通过 `getCheckedKeys` 方法获取已展开的节点,并将结果打印到控制台上。您可以根据实际情况修改代码来适应您的项目需求。
阅读全文