custom-leaf.vue 687 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <el-tree :props="props" :load="loadNode" lazy show-checkbox />
  3. </template>
  4. <script lang="ts" setup>
  5. import type Node from 'element-plus/es/components/tree/src/model/node'
  6. interface Tree {
  7. name: string
  8. leaf?: boolean
  9. }
  10. const props = {
  11. label: 'name',
  12. children: 'zones',
  13. isLeaf: 'leaf',
  14. }
  15. const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  16. if (node.level === 0) {
  17. return resolve([{ name: 'region' }])
  18. }
  19. if (node.level > 1) return resolve([])
  20. setTimeout(() => {
  21. const data: Tree[] = [
  22. {
  23. name: 'leaf',
  24. leaf: true,
  25. },
  26. {
  27. name: 'zone',
  28. },
  29. ]
  30. resolve(data)
  31. }, 500)
  32. }
  33. </script>