Element UI-懒加载树节点

element ui中提供了树形控件的懒加载，但这种树的懒加载只支持一级一级加载，例如对省-市-区-局站进行懒加载，先加载省，再点击省后，懒加载市，一级一级请求。

这种方式并不支持初始化一部分树后，再后续加载子节点，例如需要对省市区-局站进行异步加载，首先初始化省市区后，当点击区时，再懒加载局站，其代码实现如下：

<template>
  <el-tree :data="treeData"
           :props="defaultProps"
           ref="tree"
           node-key="id"
           @node-click="handleNodeClick"
           @node-expand="expandClick">
          <template #default="{node, data}">
              <span class="custom-tree-node">
                <i v-if="data.loading" class="el-icon-loading"></i>
                <span class="node-label">{{ node.label }}</span>
              </span>
          </template>
  </el-tree>
</template>

<script>
export default {
  name: "tree1",
  data () {
    return {
      treeData: [{
        id: 1,
        label: '省',
        children: [{
          id: 11,
          label: '市',
          children: [{
            id: 111,
            label: '区',
            children: []
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    // this.$refs.tree.getNode(1).expanded = true
    // this.$refs.tree.getNode(11).expanded = true
    // this.$refs.tree.getNode(111).isLeaf = false
    this.treeDataDeal(this.treeData)
  },
  methods: {
    // 树数据处理
    treeDataDeal (treeData) {
      treeData.forEach(item => {
        if (!item.children || item.children.length <= 0) {
          // 设置为非叶子节点
          this.$refs.tree.getNode(item.id).isLeaf = false
        }else {
          // 默认展开子节点
          this.$refs.tree.getNode(item.id).expanded = true
        }
        this.treeDataDeal(item.children)
      })
    },
    // 点击节点
    handleNodeClick(data) {
      this.getData(data)
    },
    // 节点展开
    expandClick (data) {
      this.getData(data)
    },
    getData (data) {
      if (data.label === '区' && data.children.length < 1) {
        // 开启loading
        this.$set(data, 'loading', true)
        setTimeout(() => {
          data.children = [
            {
              id: 1111,
              label: '局站'
            }
          ]
          // 关闭loading
          this.$set(data, 'loading', false)
        }, 1800)
      }
    },
  }
}
</script>

<style scoped>

</style>

加载效果图如下：

• 初始化局部树时（省市区）时：
  

• 当点击区时，懒加载局站：
  

• 加载局站后：