|
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <vxe-cascader v-model="val1" :options="treeList" :lazy-options="lazyList" :treeConfig="treeConfig" multiple clearable></vxe-cascader> |
| 4 | + </div> |
| 5 | +</template> |
| 6 | + |
| 7 | +<script lang="ts" setup> |
| 8 | +import { ref, reactive } from 'vue' |
| 9 | +import { VxeTreeSelectPropTypes } from '../../../types' |
| 10 | +
|
| 11 | +interface NodeVO { |
| 12 | + label: string |
| 13 | + value: string |
| 14 | + hasChild?: boolean |
| 15 | +} |
| 16 | +
|
| 17 | +const val1 = ref(['4-2']) |
| 18 | +
|
| 19 | +const treeConfig = reactive<VxeTreeSelectPropTypes.TreeConfig>({ |
| 20 | + lazy: true, |
| 21 | + loadMethod ({ node }) { |
| 22 | + return getNodeListApi(node) |
| 23 | + } |
| 24 | +}) |
| 25 | +
|
| 26 | +const treeList = ref<VxeTreeSelectPropTypes.Options>([ |
| 27 | + { label: '节点2', value: '2', hasChild: true }, |
| 28 | + { label: '节点3', value: '3', hasChild: true }, |
| 29 | + { label: '节点4', value: '4', hasChild: true }, |
| 30 | + { label: '节点5', value: '5', hasChild: false } |
| 31 | +]) |
| 32 | +
|
| 33 | +const lazyList = ref<VxeTreeSelectPropTypes.Options>([ |
| 34 | + { label: '节点4-2', value: '4-2' } |
| 35 | +]) |
| 36 | +
|
| 37 | +let treeKey = 1 |
| 38 | +const getNodeListApi = (node: any) => { |
| 39 | + return new Promise<NodeVO[]>(resolve => { |
| 40 | + // 模拟后端接口 |
| 41 | + setTimeout(() => { |
| 42 | + resolve([ |
| 43 | + { label: `节点${node.value}-${treeKey}`, value: `${node.value}-${treeKey}`, hasChild: Math.random() * 10 < 6 }, |
| 44 | + { label: `节点${node.value}-${treeKey + 1}`, value: `${node.value}-${treeKey + 1}`, hasChild: Math.random() * 10 < 6 } |
| 45 | + ]) |
| 46 | + treeKey += 2 |
| 47 | + }, 500) |
| 48 | + }) |
| 49 | +} |
| 50 | +</script> |
0 commit comments