ant-design-vue/components/tree/demo/dynamic.md

1.0 KiB

#### 异步数据加载 点击展开节点,动态加载数据。 #### load data asynchronously To load data asynchronously when click to expand a treeNode.
<template>
  <a-tree
    :loadData="onLoadData"
    :treeData="treeData"
  />
</template>

<script>
export default {
  data () {
    return {
      treeData: [
        { title: 'Expand to load', key: '0' },
        { title: 'Expand to load', key: '1' },
        { title: 'Tree Node', key: '2', isLeaf: true },
      ],
    }
  },
  methods: {
    onLoadData (treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }
        setTimeout(() => {
          treeNode.dataRef.children = [
            { title: 'Child Node', key: `${treeNode.eventKey}-0` },
            { title: 'Child Node', key: `${treeNode.eventKey}-1` },
          ]
          this.treeData = [...this.treeData]
          resolve()
        }, 1000)
      })
    },
  },
}
</script>