el-tree 懒加载 默认展开二级菜单
时间: 2023-07-20 14:42:26 浏览: 220
如果你使用的是 Element UI 的 el-tree 组件,并且想要实现默认展开二级菜单并且使用懒加载,则可以通过以下步骤实现:
1. 首先,在 data 中设置一个数组来存储默认展开节点的 key 值,例如:
```
data() {
return {
expandedKeys: []
}
}
```
2. 在 el-tree 组件中,设置 v-model 来绑定展开节点的 key 值和 :default-expanded-keys 来设置默认展开的节点:
```
<template>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="expandedKeys"
:load="lazyLoad"
:lazy="true"
@node-expand="handleNodeExpand"
v-model="expandedKeys"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
{{ data.label }}
</span>
</el-tree>
</template>
```
3. 在 mounted 钩子函数中,将需要默认展开的节点的 key 值添加到 expandedKeys 数组中,例如:
```
mounted() {
this.expandedKeys.push('2')
}
```
其中,'2' 是需要展开的节点的 key 值。
4. 在 lazyLoad 方法中,根据节点的 level 层级判断是否需要展开节点:
```
lazyLoad(node, resolve) {
const { level } = node
if (level === 1) {
// 加载子节点数据
// ...
// 展开节点
this.expandedKeys.push(node.key)
}
}
```
以上就是实现默认展开二级菜单并且使用懒加载的 el-tree 组件的步骤。
阅读全文