vxe-tree 树组件懒加载的用法

vxe-tree 树组件懒加载的用法，通过 lazy 和 has-child-field 指定 当前节点是否使用异步加载，当点击展开时会自动调用 load-method 去加载子节点

官网：https://vxeui.com/

效果

当节点被勾选是，异步加载后的子节点也会被自动选中

<template>
  <div>
    <vxe-tree
      lazy
      show-checkbox
      has-child-field="hasChild"
      :node-config="nodeConfig"
      :load-method="loadMethod"
      :data="treeList">
    </vxe-tree>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const nodeConfig = reactive({
  isHover: true
})

const treeList = ref([
  { title: '节点2', id: '2', hasChild: true },
  { title: '节点3', id: '3', hasChild: true },
  { title: '节点4', id: '4', hasChild: true },
  { title: '节点5', id: '5', hasChild: false }
])

const getNodeListApi = (node) => {
  return new Promise(resolve => {
    // 模拟后端接口
    setTimeout(() => {
      resolve([
        { title: `${node.title}-1`, id: `${node.id}1`, hasChild: Math.random() * 10 < 6 },
        { title: `${node.title}-2`, id: `${node.id}2`, hasChild: Math.random() * 10 < 6 }
      ])
    }, 500)
  })
}

const loadMethod = ({ node }) => {
  return getNodeListApi(node)
}
</script>

https://github.com/x-extends/vxe-pc-ui