el-tree 采用懒加载方式,怎么初始化就显示根节点和下级节点

核心代码

this.defaultExpandedKeys = rootNodes.map(node => node.id)// 注意这里才是关键代码--初始化就显示根节点和下级节点,因为会展开下级组织,这时node.level不是 0,会触发加载子节点动作

<template>
  <el-tree
    ref="treeRef"
    :data="treeData"
    :props="defaultProps"
    lazy
    :load="loadNode"
    :default-expanded-keys="defaultExpandedKeys"
    node-key="id"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      defaultExpandedKeys: []
    }
  },
  methods: {
    loadNode(node, resolve) {
      console.log('node>>', node)
      if (node.level === 0) {
        // 加载根节点数据
        console.log('加载根节点')
        this.fetchRootData(resolve)
      } else {
        // 加载子节点数据
        console.log('加载子节点')
        this.fetchChildData(node, resolve)
      }
    },
    fetchRootData(resolve) {
      // 模拟异步请求根节点数据
      setTimeout(() => {
        const rootNodes = [
          { id: 1, label: 'Root Node 1', leaf: false },
          { id: 2, label: 'Root Node 2', leaf: false }
        ]
        this.defaultExpandedKeys = rootNodes.map(node => node.id)// 注意这里才是关键代码--初始化就显示根节点和下级节点,因为会展开下级组织,这时node.level不是 0,会触发加载子节点动作
        resolve(rootNodes)
      }, 500)
    },
    fetchChildData(node, resolve) {
      // 模拟异步请求子节点数据
      setTimeout(() => {
        const children = [
          { id: `${node.data.id}-1`, label: 'Child Node 1', leaf: true },
          { id: `${node.data.id}-2`, label: 'Child Node 2', leaf: true }
        ]
        resolve(children)
      }, 500)
    }
  }
}
</script>