Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
    <h2>Lazy Load</h2>
    <Tree :data="data" @nodeExpand="onNodeExpand($event)"></Tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    };
  },
  created() {
    this.getNodes().then(data => {
      this.data = data;
    });
  },
  methods: {
    onNodeExpand(event) {
      let node = event;
      if (!node.children) {
        this.getNodes(node).then(data => {
          this.$set(node, "children", data);
        });
      }
    },
    getNodes(node) {
      let nodes = [
        {
          id: 1,
          text: "My Documents",
          children: [
            {
              id: 11,
              text: "Photos",
              state: "closed"
            },
            {
              id: 12,
              text: "Program Files",
              state: "closed"
            },
            {
              id: 13,
              text: "index.html"
            },
            {
              id: 14,
              text: "about.html"
            },
            {
              id: 15,
              text: "welcome.html"
            }
          ]
        }
      ];
      let photos = [
        {
          id: 111,
          text: "Friend"
        },
        {
          id: 112,
          text: "Wife"
        },
        {
          id: 113,
          text: "Company"
        }
      ];
      let programs = [
        {
          id: 121,
          text: "Intel"
        },
        {
          id: 122,
          text: "Java"
        },
        {
          id: 123,
          text: "Microsoft Office"
        },
        {
          id: 124,
          text: "Games"
        }
      ];
      return new Promise(resolve => {
        if (!node) {
          resolve(nodes);
          return;
        }
        setTimeout(() => {
          if (node.id == 11) {
            resolve(photos);
          } else if (node.id == 12) {
            resolve(programs);
          }
        }, 1000);
      });
    }
  }
};
</script>